Understanding State Management in Flutter (With best resources as per Flutter Team)

What is State Management?

If you have been working with Flutter for some time, you might have experienced times when UI control of one screen depended on the state of the UI controls of some other screen. This sharing of application state between the screens, across the app, is known as managing of state or State Management.

Example

Suppose you are going through a list of products in an app whose widget tree looks something like this.

Now you choose an item and add it to your cart. So, the state of the cart needs to be changed with respect to the action you have performed in some other part of the app.

This is where state management comes into play.

Now, you might be thinking that this can easily be achieved by lifting the state up in the widget tree. Yes, that’s absolutely right!

BUT

this was just a simple example to help you understand about state management. In most of the apps, you need to modify states from many different places and by using the technique of lifting the state up, you would be creating a mess in the code and would be fighting the framework instead of letting it help you. This will ultimately result in difficulties in managing the app and this might make your app full of bugs.

Solution

Fortunately, Flutter has many mechanisms for widgets to share data and services. It is not possible to cover every one of them here so I am just sharing the links of the best resources (provided by the Flutter team itself) of different state management techniques and you can choose the one that best suits your app.

Provider (Recommended approach by the Flutter team)

Basics

Provider Package

Making sense of all those Flutter Providers

You might not need Redux: The Flutter edition

setState (The low-level approach to use for widget-specific, ephemeral state)

Adding interactivity to your Flutter app, a Flutter tutorial

Basic state management in Google Flutter

InheritedWidget & InheritedModel (The low-level approach used to communicate between ancestors and children in the widget tree. This is what provider and many other approaches use under the hood.)

InheritedWidget docs

Managing Flutter Application State With InheritedWidgets

Inheriting Widgets

Using Flutter Inherited Widgets Effectively

Widget — State — Context — InheritedWidget

Redux (Missed me Web Developers !?)

Animation Management with Redux and Flutter

Accompanying article on Medium to the above video

Flutter Redux package

Redux Saga Middleware Dart and Flutter

Introduction to Redux in Flutter

Flutter + Redux — How to make a shopping list app

Building a TODO application (CRUD) in Flutter with Redux — Part 1

Flutter Redux Thunk, an example

Building a (large) Flutter app with Redux

Fish-Redux–An assembled flutter application framework based on Redux

Async Redux–Redux without boilerplate. Allows for both sync and async reducers

Flutter meets Redux: The Redux way of managing Flutter applications state

BLoC / Rx (A family of stream/observable based patterns)

Architect your Flutter project using BLoC pattern

BloC Library

Reactive Programming — Streams — BLoC — Practical Use Case

MobX (A popular library based on observables and reactions)

MobX.dart, Hassle-free state-management for your Dart and Flutter apps

Getting started with MobX.dart

Flutter: State Management with Mobx

GetX (A simplified reactive state management solution)

GetX package

Complete GetX State Management

GetX Flutter Firebase Auth Example