initState() Vs setState() function in Flutter

Flutter is a popular mobile application framework that allows developers to create cross-platform mobile applications for iOS and Android, using a single codebase. One of the essential tools in Flutter that is used when building UI is the StatefulWidget. A StatefulWidget allows you to create dynamic UI, where the data can change over time or in response to user actions.

When working with a StatefulWidget, it is essential to understand the concept of state in Flutter. State is simply the current condition of your app. For example, if your app has a button that can be toggled on or off, the state of that button would indicate whether it is currently on or off.

In Flutter, there are two methods that can be used to update the state of a StatefulWidget:

1. setState()

2. initState()

In this blog, we will discuss these two methods in detail and explain how they are used in Flutter.

Note that these two function are not available inside stateless widget.

Using the initState() method

The initState() method is an excellent place to initialize your app's state when building a StatefulWidget. This method is called when the widget is first created and is only called once during the widget's lifecycle.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Copy

In the above code, the initState() method is being used to initialize the state of the widget. In this example, we are not actually initializing any state, but it would be an ideal place to set up any variables or objects that your widget uses.

Using the setState() method

The setState() method is used to modify the state of a StatefulWidget. When the state of a widget changes, you must call setState() to tell Flutter to rebuild the widget with the new state.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isButtonPressed = false; // initial state

  void _toggleButton() {
    setState(() {
      _isButtonPressed = !_isButtonPressed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: RaisedButton(
          child: Text(_isButtonPressed ? 'ON' : 'OFF'),
          onPressed: () {
            _toggleButton();
          },
        ),
      ),
    );
  }
}

In the above code, we have a simple button that toggles between "ON" and "OFF" when pressed. The _isButtonPressed variable keeps track of the button's current state. When the user presses the button, the _toggleButton() function is called, which uses the setState() method to change the _isButtonPressed variable's state. This, in turn, causes the widget to rebuild, and the new state is reflected in the UI.

Conclusion

In this blog, we discussed the initState() and setState() methods in Flutter. We learned that the initState() method is an excellent place to initialize the state of a widget, while the setState() method is used to modify the widget's state during the widget's lifecycle. By using these methods, you can create dynamic UI that can respond to user input and update in real-time. I hope you found this blog useful in your journey to Flutter development.