Flutter State Management

Flutter State Management 2024: Guide for Seamless App Development

06 Mar 2024

In Flutter, ‘State Management’ is an essential but tricky concept that can be pretty hard to grasp all at once. This in-depth manual will help you understand various state management concepts, such as what a state is, why it is crucial, ephemeral and app states, their significance, and other state management techniques.

To begin, let us examine the definition of a state:

When you build a widget—a primary component in Flutter used to develop and design the app’s interface, such as a button, text, or a layout that organizes screen appearance—you create concurrent information about it, known as the state. Throughout the widget’s life, this condition varies.

Widgets facilitate various app functionalities, such as data sharing and transmission, among other tasks. Therefore, when you rebuild your user interface using data, the widget’s state immediately happens.

Let’s use an example to grasp this better:

Imagine you’re using an app to shop for groceries.

When you first sign up: The app asks for your preferences, such as favorite food items or dietary restrictions, and then customizes the homepage to show products that match your preferences.

Browsing the app: You add items to your shopping cart as you explore. The app keeps track of what’s in your cart, updating the cart icon to show the number of items added.

Making a selection: If you decide to check out, the app updates to show a summary of your cart, including items, quantities, and the total cost.

Completing the purchase: The app provides a confirmation screen with your order details and delivery information once you confirm and pay.

Flutter State Management delivers a smooth and customized shopping experience by dynamically altering the app’s interface based on your actions.

Let’s discover more about state management below. 

Why Do We Need Flutter State Management?

State management is crucial in Flutter app development because it allows us to organize and control all the different states of our app’s user interface.

For example, you want to greet users with a welcome message when they first join your app. But you don’t want to keep showing this message over a long period every time they open the app. If we didn’t manage the app’s state correctly, we might have messy code and repeated messages everywhere.

State management helps us deal with these kinds of situations. It lets us control when and where specific messages or features appear in our app’s interface. It helps us handle things like what happens when a user refreshes the app, how we update information from the server, and how different parts of the app communicate with each other.

In simpler terms, state management is like keeping track of what’s happening in our app: where users are, what they’re doing, and what information they’re interacting with.

Further Information Regarding Flutter State Management

State management can be divided into the following basic types:


An ephemeral state is like a temporary note that a widget can hold onto easily. It’s not something we need to save or manage with complex tools. Think of it like the progress bar in a loading animation or the button you tap in a navigation bar at the bottom of your screen.

An excellent example of a temporary state is what happens in a text field when you type. For instance, let’s say we have a counter called ‘_counter’ in our widget. We can change this counter’s value with the setState() function in a stateful widget. So, when we use setState(), it updates the widget’s information and shows the new value on the screen.


App State

The app state is a particular type of state that different parts of your app can share and remain consistent throughout the user’s sessions. Examples of app state include login information, user preferences, notifications from social apps, shopping carts in e-commerce apps, and the state of articles (read or unread) in a news app.

There’s no fixed rule when deciding whether to use temporary or app state. You can switch between them depending on your needs. You have the flexibility to use both the setState() method and the app state to manage the different states of your app. You might have noticed that the Flutter team uses various approaches in their app examples.

Similarly, you have the authority to categorize the bottom navigation under a selected tab as not being in a temporary state and handle it under the App state. Then, you are responsible for updating the state between sessions, from external sources, and so forth. In this scenario, we can maintain a variable _index in the app state for accessibility as required.

Hence, there are no single or multiple rules to determine whether a variable belongs to the app or ephemeral state. However, we can discern the state of a particular variable as either app or ephemeral.

The Use of setState()

The Use of setState()

Why are we using setState() for state management above?

The setState() method in Flutter updates the state of a widget, triggering it to re-render with the updated state.


  • SetState() is a simple statement method.
  • It simplifies managing your ephemeral state and functions immediately, notifying the widget that uses the state variable when its value changes.


  • SetState() is not the right type to use when managing a global state shared by the entire application.
  • As your state will be everywhere, you can experience a maintenance issue if you use setState() throughout the application.
  • SetState() must only be used in the class of the UI code. This implies that combining UI and business logic may lower the code’s quality.

Different Types of State Management by Concept

Your Flutter application transitions into either shared or local state at specific points. Let’s look into what these states entail:

Local State

A local state essentially refers to an ephemeral state. When adjusting the singular state of a page containing UI animations or controls, you engage with the local state, often facilitated by a stateful widget.

Shared State

A shared state comes into play when you need to alter the state of multiple widgets within the application. This form of state management is commonly known as app state.

Popularity-Based List of State Management

List of Popular State Management

1. Provider

Provider is a powerful tool in Flutter for managing the state of your app. It lets you easily control and share data across different parts of your app. Here’s how it works:

Create a Model: You start by creating a model class that represents the data you want to manage. This model class extends ChangeNotifier, a particular class Flutter provides for managing state.

Wrap Your App: Next, you wrap your app’s root widget with a ChangeNotifierProvider. This Provider takes an instance of your model class and makes it available to all the widgets in your app.

Access the Data: Once you’ve set up the Provider, you can access the data in your model from any widget in your app. You do this using a Consumer widget or by using the context.watch() method. These widgets automatically update whenever the data in your model changes.

Update the Data: When you need to update the data in your model, you call methods on the model class to make the changes. This automatically triggers updates to any widgets listening to the data, ensuring your UI stays in sync with the underlying data.

Here’s a simple example to illustrate how Provider works:

import ‘package:flutter/material.dart’;
import ‘package:provider/provider.dart’;

// Step 1: Create a model classclass
CounterModel extends ChangeNotifier {  
int _counter = 0;

int get counter => _counter;

 void increment() {    
notifyListeners(); // Notify listeners of state change  
void main() {  
// Step 2: Wrap the root widget with ChangeNotifierProvider    
create: (context) => CounterModel(), // Provide an instance of the model      
child: MyApp(),   
class MyApp extends StatelessWidget {  
Widget build(BuildContext context) {    
return MaterialApp(      
home: Scaffold(        
appBar: AppBar(          
title: Text(‘Provider Example’),       
body: Center(          
child: Column(            
mainAxisAlignment: MainAxisAlignment.center,            
children: <Widget>[              
Text(‘You have pushed the button this many times:’),              
// Step 3: Consume the state using Consumer widget              
builder: (context, counterModel, child) {                  
return Text(                    
style: Theme.of(context).textTheme.headline4,                 
// Step 4: Update state by calling methods on the model        
floatingActionButton: FloatingActionButton(          
onPressed: () {            
// Call method to update the state            
Provider.of<CounterModel>(context, listen: false).increment();        
 child: Icon(Icons.add),       

2. setState

If you’ve used React before, you’ll notice that setState() in Flutter functions much like useState in React. Similar to how useState works in React, setState() in Flutter explicitly manages the state of the widget where it’s declared. This approach, known as ephemeral state management, is typically handled using StatefulWidget and setState().

To grasp this concept, let’s look at an example:

What steps do you take when you want to make an app respond to user input? You might add interactivity to an app that initially consists only of non-interactive widgets. Specifically, you’d create a stateful widget to manage two other stateless widgets.

Typically, you initially decide how to handle the state of the widget. In this scenario, the widget itself will handle the state.

3. InheritedWidget and InheritedModel

InheritedWidget state management passes information from the top down to all the children below, resembling an extensive family tree.

 It’s like inheriting traits from your parents. But when your app gets big, things can get pretty complex with this setup.

InheritedModel, on the other hand, lets developers choose which parts of the tree they want to update. So, only the necessary parts are changed, making things more efficient. Many other methods, like Providers, use this idea in the background.

4. Redux

Redux is a state management system designed around a one-way data flow, separating concerns like presentation and business logic. This separation makes handling changes in the user interface easier and simplifies debugging. It’s considered one of the best ways to manage state in applications because it handles app logic straightforwardly.

5. Fish-Redux

Fish-redux relies on the Redux framework, an open-source framework designed specifically for Flutter apps. This framework simplifies state management by offering customizable assembly and enhancing the ability to isolate and reuse features of Redux. Currently, Alibaba’s Xianyu platform utilizes Fish-redux for its Flutter applications.

6. BLoC

The Business Logic Component (BLoC) is a method developers use to gather data from a central location within their project. It’s a widespread state management approach in Flutter, highly recommended by Google developers.

With BLoC, all data is handled through event streams, making it easier to manage various widget states.

7. Getlt

We can replace Provider and InheritedWidget with GetIt to access objects in our Flutter app. GetIt isn’t precisely for managing state but rather a tool for finding objects. These service locators help separate the primary implementation from the interface, enabling access to objects from anywhere.

With GetIt, you don’t need to create a widget to access data like with Redux or Provider, making it fast and straightforward.

8. MobX

MobX state management operates on the principle that if something can be derived from the app’s state, it automatically performs the derivation. This model ensures a one-way data flow, enabling developers to manage the app’s state independently of the user interface. This architecture is user-friendly, as it automatically detects and updates any changes in the app’s state, reflecting them in the UI.

The framework identifies what parts of the state are being used, known as observables. When observables change, the framework triggers reactions, which update the corresponding widgets accordingly. Remarkably, these reactions can detect state changes without requiring external connections.

9. Flutter Commands

Flutter Commands is another helpful technique for managing state using ValueNotifiers, a particular type of class that assists in using ChangeNotifier. This ChangeNotifier contains a notifyListeners() method to notify when the state changes. ValueNotifier can store only a single value but doesn’t refresh the entire widget tree whenever setState() is invoked. Instead, it efficiently informs widgets about the state change.

10. Binder

Binder state management separates the app’s state from its business logic, allowing you to view the app as a collection of small, independent states.

11. GetX

GetX is a highly effective method for managing the state of your app. It handles state, routes, dependency injection, and navigation efficiently and conveniently. With GetX, you can easily separate presentation logic, views, business logic, and dependencies. 

Plus, it offers various features and APIs to simplify development, and you don’t even need to worry about widget trees, routes, or context thanks to its dependency injection feature.

12. Riverpod

Riverpod is a state management technique much like Provider, but it tackles issues like readability, testability, and performance by ensuring data flows in one direction. It catches errors during compilation, saving developers from runtime issues and not relying on BuildContext.

13. states_rebuilder

states_rebuilder integrates a router and dependency injection to speed up development and manage states smoothly. It separates business logic from the user interface, reducing repetitive code.

14. Triple Pattern

The triple pattern is a state management method that combines ValueNotifier and Streams. It’s called ‘triple’ because it handles values like Loading, Error, and State based on the Segmented State Pattern.

Which Is The Best State Management?

Selecting the correct state management technique for your Flutter app depends on factors like app complexity and developer expertise. Each method discussed has advantages and drawbacks, so you should choose based on your requirements. 

If you’re new to Flutter, starting with techniques like Provider or setState() is recommended for simplicity and ease of use.


This blog covers all the essentials of Flutter state management, including state types and management techniques, providing valuable insights.

Among the different ways to manage state in Flutter, Provider stands out as a top choice. 

By using Provider, developers can streamline their work, improve app performance, and create a better experience for users.

Give Provider a try if you’re new to developing Flutter apps. It’s a powerful tool that can take your projects to the next level, especially regarding Flutter’s most popular state management.

If you plan to design a Flutter app, consider Nintriva, a top-tier web and mobile app development company. We specialize in various Flutter state management approaches and can deliver a reliable, feature-rich app for your needs. 

Request a call today or touch base with us and learn more about our services.

Nintriva Homepage

Prompting readers to contact Nintriva!

Related blogs