Quick Intro! ✍🏽

State management describes how the UI of your app changes when there is a change in your data (state).

You can think of state as any changes to the data on your app, and generally, in Flutter, the UI is a function of the application state.

When the state of your app changes (for example, you update a counter by tapping a button on a screen), you change the state, and that causes the UI to be redrawn by flutter.

Two Types of State🥇🥈

• Local State
• App State

Local State

A local state is a state you can neatly contain in a single widget. This means a change in this state triggers the redraw of a single widget only on a page or route (app screen). Other routes or parts of the widget tree does not need to access this state.

An example is of a local state is the same as the example in the Intro. Tapping a button in one screen changes the state of only the Text widget by incrementing its value.

For a local state, there is no need to use any state management techniques like (Provider, Redux, etc). Instead, all you need is a StatefulWidget.

Local State in Action! ⚙️

Below, you see how the action of tapping a FloatingActionButton is held in the _incrementCounter() method of the _MyHomepageState class, and is responsible for incrementing _counter by 1. In this example, the _incrementCounter() is the local state.

class MyHomepage extends StatefulWidget {
  const MyHomepage({Key? key}) : super(key: key);

  @override
  _MyHomepageState createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter = _counter + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Here, using setState() inside the StatefulWidget's State class works because no other part of your app needs access to _incrementCounter(). The result of calling _incrementCounter1 only changes inside theMyHomepage` widget.

See Ehpemeral State with a simpler example in Flutter's docs.

App State

An application state is not restricted to one app screen or route. Typically it needs to be shared across many parts of your app, and you may also want to preserve this state between user sessions.

An example is the shopping cart in an e-commerce app which shares state across the shopping items page, shopping cart page, and the checkout page.

There are different approaches to managing the application state, so I'll leave it up to your specific app requirements.🙂

Application State in Action! ⚙️⚙️

In Part 2, I'll deep dive into Application State using the provider package.

Happy coding👨🏽‍💻

If this article helped you a bit, you could support my writing via.