Stateless and Stateful Widgets

There are two types of widget we can create in flutter stateless and stateful. All the widgets we’ve created till now are stateless widgets.

Stateless Widgets and its limitations

A stateless widget can only be drawn only once when the Widget is loaded, which means we can’t redraw the Widget based on any events or user actions.

We can see this behaviour by having a Checkbox Widget. Checkbox Widget is a flutter Widget which has handler functions for Checkbox click, However, to display the checkbox with the click, we need to redraw the Widget which is only possible with hot reload or by reloading the widget itself

This doesn’t mean that stateless Widgets are not useful, it has its own usage in displaying static contents or the page which needs to be reloaded multiple times within an Application

Here is how the stateless widget with a checkbox shall look like



MyApp({this.TextInput});

final Widget TextInput;

bool checkBoxValue = false;

@override

Widget build(BuildContext ctxt) {

return new MaterialApp(

title: "MySampleApplication",

home: new Scaffold(

appBar: new AppBar(

title: new Text("Hello Flutter App"),

),

body: new Center(

child: new Column(

children: <Widget>[

TextInput,

new Checkbox(

value: checkBoxValue,

onChanged: (bool newValue){

checkBoxValue = newValue;

}

)

],

),

)

),

);

}

} class MyApp extends StatelessWidget {MyApp({this.TextInput});final Widget TextInput;bool checkBoxValue = false;Widget build(BuildContext ctxt) {return new MaterialApp(title: "MySampleApplication",home: new Scaffold(appBar: new AppBar(title: new Text("Hello Flutter App"),),body: new Center(child: new Column(children: [TextInput,new Checkbox(value: checkBoxValue,onChanged: (bool newValue){checkBoxValue = newValue;],),),);

As you can see while running this code that nothing happens when we click the checkbox unless we reload the widgets

Statelful Widgets

Stateful Widgets overcomes the reloading deficiencies of the Stateless Widgets. A Stateful Widget can be loaded many times by calling setState(). This will trigger the build(BuildContext ctxt) to be called again.

The creation of Stateful Widgets are different than creating Stateless Widget as we need to create 2 classes, one is derived from Stateful Widget and another is derived from Generic State<>.

In every Stateful Widget we override the function createState(…) to create the instance of our stateful. Here is how the stateful widget code looks like

class MyApp extends StatefulWidget {

MyApp({this.TextInput});

final Widget TextInput;

MyAppState createState() => new MyAppState();

}

bool checkBoxValue = false;

@override

Widget build(BuildContext ctxt) {

return new MaterialApp(

title: "MySampleApplication",

home: new Scaffold(

appBar: new AppBar(

title: new Text("Hello Flutter App"),

),

body: new Center(

child: new Column(

children: <Widget>[

widget.TextInput,

new Checkbox(

value: checkBoxValue,

onChanged: (bool newValue){

setState(() {

checkBoxValue = newValue;

});

}

)

],

),

)

),

);

}

} class MyAppState extends State {bool checkBoxValue = false;Widget build(BuildContext ctxt) {return new MaterialApp(title: "MySampleApplication",home: new Scaffold(appBar: new AppBar(title: new Text("Hello Flutter App"),),body: new Center(child: new Column(children: [widget.TextInput,new Checkbox(value: checkBoxValue,onChanged: (bool newValue){setState(() {checkBoxValue = newValue;});],),),);

And the overall arrangement of the widgets hierarchy shall look like