What is State Management in Flutter

State Management is a popular and most discussed topic in Flutter. If you are getting started with Flutter, it is a must-know about the State. Only then you will be able to choose a good solution from the huge range of State Management choices it offers.

State in Flutter 🗿

State by its name is quite self-explanatory “a particular condition that someone or something is in at a specific time”. In our application, that would be all the information about the application loaded into the memory when the app is launched like Assets, Resources, UI, etc. However, when we talk about State Management, we don’t refer to managing this State, as Flutter internally manages this.

State in our concern is the data that flows across your application. Which may be updated, listened to, modified, etc from any part of the application.

State: Whatever Data you need in order to rebuild your UI at any moment in time.

flutter.dev

We can categorize State into two types:

1. Ephemeral State
2. App State

Ephemeral State in Flutter 🏡

An ephemeral State is also called Local State or UI State as it is related only to a widget. There is no need for State management for this type of State, using a Simple Stateful Widget is enough. Some examples of Ephemeral State would be:

• Selected Page Index in PageView
• Selected Tab Index in TabView or BottomNavigtionBar

class HomePage extends StatefulWidget {

  // Create a class that extnds Stateful Widget 
  const HomePage({Key? key}) : super(key: key);

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

class _HomepageState extends State<Homepage> {
  // Define The Variable as private field in the State class 
  int _currentPage = 0;

  @override
  Widget build(BuildContext context) {...}

  void updateCurrentPage(int value){
  // Call setState when updating values 
     _currentPage = value;
     setState((){});
  }
}

There is no need for State Management as the complete page needs to rebuild when the PageView page changes. Note that the _currentPage is a property that is only required in this widget.

App State in Flutter 🌐

A state that is shared across multiple widgets or multiple parts of the application is called App State. Naturally, it is also called Shared State. This is the problem that the State Management solutions counters. Some examples of App State would be:

• Shopping Cart of an ECommerce Application
• Login & Authentication Details
• User Preferences and Settings

In the following image, you can see how to categorize data into Ephemeral and App State.

Why do you need State Management in your Flutter Project? 💉

In small apps, where the data is limited to only some widgets, setState((){}) is enough to manage the state. However, as the application scales, you will need to share and manipulate data across multiple widgets. This is when you realize that you need a State Management Technique.

There are dozens of options available, but the basic idea is common, i.e to share the data across multiple widgets. Using a good State Management technique also helps you separate your backend and your frontend logic. Thus the codebase becomes maintainable and readable.

State Management Techniques 🍇

Our main issue here is that we have to pass dependencies across multiple pages. Even if we centralize the data as global we still can not get updates on the data in the widget tree. So one basic thing that we could do is Dependency Injection. A native solution in Flutter to do this is using the Inherited Widget.

Inherited Widget efficiently propagates information down the tree.

flutter.dev

While this sort of solves our problem, we still have some issues using Inherited Widget. One major issue is the boilerplate code that comes with each Inherited Widget. To counter this specific problem Rémi Rousselet created Provider. The provider uses Inherited Widget under the hood, however, makes the implementation completely easy.

Provider: A wrapper around InheritedWidget to make them easier to use and more reusable.

https://pub.dev/packages/provider

The Provider is more than enough for State Management in Flutter, but because of some limitations, they created a new version of the Provider. The author of Provider itself (Rémi Rousselet) introduced RiverPod. RiverPod is a revamped version of the Provider. Now we don’t face any runtime errors, we receive all errors during runtime itself. Also, it isn’t dependent upon Flutter, so you don’t need Build context to listen to providers, also now can use RiverPod in Dart projects as well.

RiverPod is enough for small to medium size projects. However, large projects require more than just State Management, a clean architecture at the cost of BoilerPlate code. Some of the State Management Solutions for large projects are BLoC, Redux, MobX, GetX, etc. However, these solutions are only preferred for large-scale projects, in small projects, this causes a large amount of boilerplate and thus leads to confusion.

Thus, for small and medium-size projects RiverPod in combination with ValueNotifier and ChangeNotifier can suffice the need of State Management for most projects.

Conclusion ➰

In this post, we looked at the basics of State in Flutter. We discussed Ephemeral and App State in Flutter along with the solutions provided to manage state in Flutter.

Now that you know about State Management in Flutter, you should check these posts next:

• Complete guide to Testing in Flutter
• Streams in Flutter
• App Lifecycle in Flutter
• Null Safety in Dart, Flutter Essentials

If you have any queries you can comment below and I will be happy to help you. If you are new to Flutter check my post on how to install Flutter on windows?