Example of How to Use State Management in Flutter

Hello guys, Today we would learn about State Management in flutter in simplest manner. As you all of heard about State keyword in flutter but most of beginner developer dose not know how state works ? In today’s tutorial we would discuss about State in flutter, How state works, How we can define state, how we can use state in flutter to update UI elements. Because the main purpose of State is to update UI components in application real time on a particular event like onPress or onClick. State triggers when user usages its State update method setState(() {}) to update the state value. You can feel like the setState(() {}) method is the backbone of States in flutter. You can use it anywhere in program and change the State value. So in this tutorial we would learn about Example of How to Use State Management in Flutter Android iOS application.

Contents in this project Example of How to Use State Management in Flutter:

1. Open your flutter project’s main.dart file and import material.dart package.

2. Creating void main runApp() method and here we would call our main Root parent class MyApp.

3. Creating our main parent class MyApp extends StatelessWidget. This is the state less class. In this class we cannot use State. This class is just the base of our application. Here we would call SampleWidget(), which is our next class.

4. Creating another class named as SampleWidget extends StatefulWidget. From now on we can use State in our given class tree. But the code is not over yet. We have to make another class named as SampleStateWidget extends State<State Parent Class Name> with createState() method. This method would allow mutable state management in given class tree and from now on we can use State in next class. The createState() method called by flutter framework which would create State object in given class tree.

5. Creating our main State class named as class SampleStateWidget extends State<SampleWidget>. After extending our class to State we can use State methods in our current class.

6. Creating 3 String variables, two of them has their own values assigned and third variable has empty value.

7. Now we would make a function named as add(), Inside the function we would call the setState(() {}) method and update the third variable value with A and B variable. The main benefit of using state in flutter is you don’t have to personally create state variables, Just use the setState(() {}) method and it’ll convert the current variable as State.

8. Creating Widget Build Area -> Center widget -> Column widget -> Here we would make a Text widget and using the $+Variable_Name method we would display the variable value like on app screen. We would also make a Raised Button widget to call the add() method on button click event.

9. Complete source code for main.dart file:

Screenshots:

Example of How to Use State Management in Flutter

Leave a Reply

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