State is data/information used by your App or widgets in our App. State can be things like username or in our case, index of the question we want to show.

App State can be Authenticated Users

Widget State can be Current User Input or which question is currently selected.

StatefulWidget has some internal state which is the core about this widget.

We’ll inherit/extend MyApp class from StatefulWidget instead of StatelessWidget and will override createState() method. Then we’ll create another class that will hold all the previous code.

class MyAppState extends State<MyApp>
and in answerQuestion() function we have now used setState() function that takes an anonymous function where we increment questionIndex variable. Here is the complete code snippet.

//File Name: main.dart
import 'package:flutter/material.dart';

/*
* The arrow function allows us to create a simplified function consisting of a single expression.
* We can omit the curly brackets and the return keyword
*/

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

class MyApp extends StatefulWidget {
  /*
   * createState() is a method that takes no arguments but returns a State object
   * which is connected to a StatefulWidget
   */
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  } //createState()
} //StatefulWidget

class MyAppState extends State<MyApp>{
  var questionIndex = 0;

  void answerQuestion() {
    setState( () {
      questionIndex++;
    } );
    print(questionIndex);
  }

  @override
  Widget build(BuildContext context) {
    var questions = [
      'What\'s your favorite color?',
      'What\'s your favorite animal?'
    ];
    return MaterialApp(
      /*
      * A Scaffold Widget provides a framework which implements the basic material design visual
      * layout structure of the flutter app.
       */
      home: Scaffold(
        appBar: AppBar(
          title: Text('First Flutter App'),
        ),
        body: Column(
          children: <Widget>[
            Text(questions[questionIndex]),
            ElevatedButton(
              child: Text('Answer1'),
              //onPressed takes a function
              onPressed: answerQuestion,
            ),
            ElevatedButton(
              child: Text('Answer2'),
              onPressed: () => print('Answer2 chosen!'),
            ),
            ElevatedButton(
              child: Text('Answer3'),
              onPressed: () {
                //...multiline function body
                print('Answer3 chosen');
              },
            ), //ElevatedButton()
          ], //<Widget>[]
        ), //Column()
      ), //Scaffold()
    ); //MaterialApp()
  } //build()
} //MyApp()

What Flutter actually does when setState() is executed?

setState() is a function that forces Flutter to re-render user interface, however not the entire user interface but instead part of it that requires updations, question text in our case. setState() updates the widget by calling its build method again.

Pressing the Answer1 button will now change the question, thus we are maintaining the state which in this case is the questionIndex of questions list.

If we press Answer1 button second time, we’ll get an error and our app will crash because our questions list contains only two list items. We’ll solve this problem somewhere later. 

At the moment the point of this blog post was to break the ice to understand the concept of Flutter StatefulWidget.
If you have any question, please ask in the comments section.

Happy Coding!

Comments

comments