flutter-tutorial

Flutter State Management

In this section, we’ll talk about state management and how to deal with it in Flutter. We already know that everything in Flutter is a widget. The widget can be divided into two types: stateless widgets and stateful widgets. There is no internal state in the Stateless widget. It means we can’t update or modify it once it’s been built until they’re initialised again. A Stateful widget, on the other hand, is dynamic and has a state. It means we can simply tweak it during its existence without having to reinitialize it.

What is the definition of state?

A state is data that may be read when the widget is created and that may change or be adjusted over the app’s lifetime. You must update the state object if you wish to change your widget, which you can do with the setState() function available for Stateful widgets. We may use the setState() function to change the properties of the state object that causes the UI to redraw.

One of the most popular and important activities in the lifespan of an application is state management. Flutter is declarative, according to the documentation. It signifies that Flutter’s UI is based on the current state of your app. The following diagram illustrates how you can construct a UI from application state.

To grasp the notion of state management, consider the following example. Assume you’ve generated a customer or product list in your app. Assume you’ve dynamically added a new client or product to that list. Then, in order to see the newly added item in the record, you must reload the list. As a result, you must reload the list whenever you add a new item. To boost performance, this sort of programming necessitates state management to handle such a situation. It’s because the state is updated every time you make a modification or update it.

In Flutter, the state management categorizes into two conceptual types, which are given below:

  • Ephemeral State
  • App State

Ephemeral State

This state is also known as the User Interface State (UI State) or the Local State. It is a form of state that is linked to a specific widget, or a state that is contained within a single widget. You don’t need to employ state management strategies in this situation. Text Field is a common example of this condition.

Example

class MyHomepage extends StatefulWidget {  
  @override  
  MyHomepageState createState() => MyHomepageState();  
}  
  
class MyHomepageState extends State<MyHomepage> {  
  String _name = "Peter";  
  
  @override  
  Widget build(BuildContext context) {  
    return RaisedButton(  
        child: Text(_name),  
        onPressed: () {  
           setState(() {  
              _name = _name == "Peter" ? "John" : "Peter";  
           });  
         },  
      );  
  }  
}  

The _name is an ephemeral state in the example above. Only the setState() function of the StatefulWidget’s class has access to the _name in this case. The setState() function is called by the build method, and it modifies the state variables. When this method is called, the widget object is replaced with a new one, which has the variable value that has been changed.

App State

It’s not the same as the ephemeral state. It’s a state that we want to preserve throughout user sessions and communicate across different portions of our app. As a result, this state type can be applied universally. It’s also referred to as shared state or application state. User preferences, login information, notifications in a social networking app, the shopping cart in an e-commerce app, the read/unread state of articles in a news app, and so on are all examples of this state.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *