Widgets state in flutter

In this blog we will learn about Widgets States in Flutter

Before going to know about widget states in Flutter let first know something about widget in flutter.

In flutter we use widget to make ui. To build any app in flutter we start it with widget.
It is the building block of flutter application.
We can compare widget with view in android, but the widget is more powerful then view.

Widgets are arranged in parent child tree like structure. The entire widget tree structure forms a layout or screen of app.

Flutter has a rich set off in-built widgets. Apart from this we can also create
own widgets according to need.

Partner with us for custom Flutter app development services.

Types Of Widgets

We can divide flutter widgets in two type.

1. Stateless Widgets
2. Stateful Widgets

What is state?

The State is information that can read synchronously when the widget is build and might change during their lifetime of the widget.
A information of properties of a widget can be determine from a state.

Stateless Widget:

We are all aware from immutable property means that remains unchanged.

Stateless widgets have immutable property.
They don’t change their state throughout the entire lifetime of widgets or Stateless widgets can’t change their state when app is running.
We can also say that widgets can’t be redraw while app is running.

For example- Icon and a text.

If widget doesn’t changes then it is stateless widgets.

For example

import 'package:flutter/material.dart';

void main() => runApp(StatelessWidgetExample());

class StatelessWidgetExample extends StatelessWidget {
@override Widget build(BuildContext context)
{return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(backgroundColor: Colors.redAccent,
title: Text("Stateless Widget Example"), ),
body: Container(child: Center(child: Text("Stateless Widget "),
),

),
),
);
}}

import 'package:flutter/material.dart';

void main() => runApp(StatelessWidgetExample());

class StatelessWidgetExample extends StatelessWidget {

@override Widget build(BuildContext context)

{return MaterialApp(

home: Scaffold(

backgroundColor: Colors.white,

appBar: AppBar(backgroundColor: Colors.redAccent,

title: Text("Stateless Widget Example"), ),

body: Container(child: Center(child: Text("Stateless Widget "),

);

}}

Result:

Stateful Widgets

If a widget changes their behaviour througout their lifetime then it is stateful widgets.

Stateful widgets are dynamic widgets means that they are keep changes their state.

Staetful widgets can re-render or redraw when their state changes.

They can be updated during runtime ow while app is running based on user action or data change.

A stateful widget is implemented by two classes: a subclass of StatefulWidget and a subclass of State.

For Example: Checkbox, Radio Button

Let’s take below example in which button color gets changes and count value gets increased by one on every time button clicked.

import 'dart:html';

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
int counter = 0;
Color buttonColor = Colors.green;
void changeColor() {
counter++;
if (buttonColor == Colors.green) {
buttonColor = Colors.red;
} else {
buttonColor = Colors.green;
}
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Statefull Widget Example'),
backgroundColor: Colors.blueGrey[900],
),
backgroundColor: Colors.white,
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
child: Icon(
Icons.favorite,
color: buttonColor,
size: 80.0,
),
onPressed: () {
setState(() {
changeColor();
print(counter);
});
},
),
Text('Cliked Count: $counter'),
Text('Click on favourite floating button')
],
),
),
),
),
);
}
}

import 'dart:html';

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatefulWidget {

@override

_MyAppState createState() => _MyAppState();

}

class _MyAppState extends State<MyApp> {

int counter = 0;

Color buttonColor = Colors.green;

void changeColor() {

counter++;

if (buttonColor == Colors.green) {

buttonColor = Colors.red;

} else {

buttonColor = Colors.green;

}

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('Statefull Widget Example'),

backgroundColor: Colors.blueGrey[900],

backgroundColor: Colors.white,

body: SafeArea(

child: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

FlatButton(

child: Icon(

Icons.favorite,

color: buttonColor,

size: 80.0,

onPressed: () {

setState(() {

changeColor();

print(counter);

});

Text('Cliked Count: $counter'),

Text('Click on favourite floating button')

);

}

Result :

Want to know more about states of widgets in flutter click here.

Conclusion :

In this blog, we learn about states of widgets in flutter.

Hope ! this will help you in finding what you are looking for.

Thanks For Reading

State of widgets in flutter Widgets in flutter

Pankaj Tyagi

27 Apr, 2023
Updated by - Pankaj Tyagi
30 Apr, 2021
Created by - Pankaj Tyagi

. . .

Widgets States in Flutter