Search⌘ K
AI Features
Home
Courses
The Flutter GetX Ecosystem

Introduction to State Management

Explore state management fundamentals in Flutter and understand how GetX simplifies external state handling. This lesson covers managing widget state, using StatefulWidget and GetxController, and implementing reactive UI updates with GetBuilder for improved app responsiveness.

We'll cover the following...

Overview

State management is a fundamental concept in Flutter app development, crucial for maintaining and updating the data that drives the user interface. In Flutter, a widget’s state represents its current configuration and appearance. When this state changes, the widget typically needs to be rebuilt to visually reflect the updated state.

In Flutter, managing state effectively ensures that your app remains responsive and efficient, especially as it grows in complexity. State management solutions help developers handle various aspects of the state, from simple data changes within a widget to complex interactions across different app parts.

Example of state management

When we say “app’s state,” we refer to the current state of all its widgets. So, what is a widget’s state? Let us understand with an example. Look at the text widget below:

The text widget’s current state
The text widget’s current state

The text widget’s current state comprises its properties, i.e., its font size, family, characters, style, etc. If any of the properties of the widget change, we consider it to be a new state. For instance, we can update the widget’s state by changing the text’s font family from Roboto to Aclonica.

The text widget’s updated state
The text widget’s updated state

The art of deciding when and how a widget’s state would change is called state management.

Why managing state is tricky?

State management is one of the hottest topics in the Flutter community and is intimidating to most beginners. One of the reasons is that there’s no concrete method that we can learn to manage an app’s state. So instead, we learn certain practices that help us manage state on a case-to-case basis and get better with experience.

Another thing is that there are way too many state management packages for Flutter. Now having options is good, but too many choices confuse beginners as to which one is the best. The answer to that question is simple—the package we’re most comfortable using is the best. In the coming lessons, we will discover how GetX can become that package for us. But first, let’s see how we manage state in Flutter.

State management in Flutter

While there are many approaches to managing state in Flutter, we’ll discuss the simplest one—using setState. The setState method is provided with StatefulWidget, whose job is to let the widget know that its state has changed and needs to rebuild itself.

Take a look at Flutter’s default counter app:

Dart
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      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),
      ),
    );
  }
}

StatefulWidget comprises two classes—one is the widget itself, and the second is its state. The state class is responsible for building the widget in its current state. When the state changes, the entire widget is rebuilt.

And when does the state change? Whenever setState is called. If we increment _counter without calling setState, nothing will change visually since the widget is still in its previous state.

This approach works fine only if we want to update the widget internally. However, suppose we wish to update the widget from outside the class, i.e., from a different widget or in reaction to an event. In that case, we need a more advanced state management solution.

So, let’s look at how GetX handles state management.

State management with GetX

We’ll take the same counter app example and implement it with the GetX approach. First, we create a Controller class that extends GetxController:

Dart
class Controller extends GetxController {}

We’ll explain GetxController in detail in the coming lessons, but for now, add the counter variable and the increment() method to the controller.

Dart
class Controller extends GetxController {
  int counter = 0;
  void increment() {
	  counter++;
	  update();
  }
  
}

The update() method is the replacement for the setState method; the only difference is that it’s outside the widget class.

Now create StatelessWidget that replicates the counter app, and remove the _counter variable and incrementCounter() method. The widget should look like this:

Dart
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      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: () {},
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Finally, wrap the Scaffold with GetBuilder class like this:

Dart
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<Controller>(
	  init: Controller(),
	  builder: (controller) => Scaffold(
	    appBar: AppBar(
	      title: const Text('Flutter Demo Home Page'),
	    ),
	    body: Center(
	      child: Column(
	        mainAxisAlignment: MainAxisAlignment.center,
	        children: <Widget>[
	          const Text(
	            'You have pushed the button this many times:',
	          ),
	          Text(
	            '${controller.counter}', // accessing counter variable
	            style: Theme.of(context).textTheme.headline4,
	          ),
	        ],
	      ),
	    ),
	    floatingActionButton: FloatingActionButton(
	      onPressed: controller.increment, // using increment method
	      tooltip: 'Increment',
	      child: const Icon(Icons.add),
	    ),
      );
    );
  }
}

The init method is used to initialize Controller, which we can then access inside the builder via controller parameter. We use controller to get the counter variable and call the increment() method. And that’s it! The state of the widget is now managed from outside, i.e., via Controller.

This is an example of one of the approaches provided by GetX for state management. You might have found it overwhelming, but don’t worry; this was just a brief introduction. You’ll understand everything as we move forward in the course.