Flutter: Everything is a Widget Series - Part 3: State in Widgets.
August 21st, 2019

One of the main themes that quickly jump at you while using Flutter is that everything is a widget. This series aims to help beginners understand this simple yet powerful concept and introduce them to basic widgets in Flutter.To help us in this journey, I built a Twitter Mobile Clone App using only the inbuilt widgets that come with Flutter. You can find the code at https://github.com/topeomot2/twitter-ui-app



Before going on to the different widgets we need to look at the concept of "State". This is not a term unique to Flutter but can also be found in other languages, the most well-known being React.

State generally means a set of properties that determine what "situation/condition" the application is in. One of the best analogy I have seen is the comparison of temperature as a State property that determines the "condition" of water. Increase the temperature to 100⁰C and above, water becomes steam (gaseous state), below 0 ⁰C, water becomes ice (solid state).

Generally, State exists at different levels of the application. State Management is a major topic and articles can be found online. This link includes a more technical look into state.

For State at the widget level, Flutter gives us a State Class. Below is from the comments in the Flutter source code for the class.

"State is information that (1) can be read synchronously when the widget is built and (2) might change during the lifetime of the widget."

Based on whether a widget has a State Class attached to it or not, there are 2 basic widget types in Flutter, the Stateless Widget and the Stateful Widget.

Stateless Widget

From the Flutter source code

StatelessWidgets class are for widgets that always build the same way given a particular configuration and ambient state.

Stateless Widgets do not have a State class attached to them. Whatever configuration was passed during the widget creation cannot be changed internally by the widget itself. Below is an example of a Stateless Widget.

class StatelessSample extends StatelessWidget {

  final int count;

  const StatelessSample({Key key, this.count}) : super(key: key);

  
  Widget build(BuildContext context) {
    return Container(
      child: Text(count.toString(),
        style: TextStyle(
          color: Colors.white
        ),
      ),
    );
  }
}

For the reason above, Stateless Widget are ideal for sections of the User Interface used mainly for displaying information and obviously the information must be passed into the constructor.

Stateful Widget

From the Flutter source code

A StatefulWidget is a widget that has mutable state.

Let us look at a simple example.

class StatefulSample extends StatefulWidget {

  final int count;

  const StatefulSample({Key key, this.count}) : super(key: key);

  
  _StatefulSampleState createState() => _StatefulSampleState();
}

class _StatefulSampleState extends State<StatefulSample> {

  int count;

  
  void initState() {
    super.initState();
    count = widget.count;
  }
  
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Container(
            child: Text(count.toString(),
              style: TextStyle(
                  color: Colors.white
              ),
            ),
          ),
          RaisedButton(
            child: Text('Increase Count'),
            onPressed: (){
              setState(() {
                count += 1;
              });
            }
          )
        ],
      ),
    );
  }
}

Please note the following

The properties above make Stateful Widgets ideal for container widgets which control the display of other widgets.

No matter which you use, the build method in a Stateless or Stateful Widget is where you will return what you want displayed. As we learnt in the last lesson this can be simple inbuilt widgets or complex compositions.