FLUTTER State Management
FLUTTER
State management in Flutter is the process of handling and updating the data that determines the visual appearance and behavior of a widget over time.
Flutter State Management
➔ In Flutter, state management is the process of tracking and updating the data that defines your application's user interface (UI).
➔ Flutter is a declarative framework and its user interface (UI) is a direct reflection of its current state. So when the state changes, the framework rebuilds the relevant parts of the widget tree to reflect those updates.
➔ In Flutter, the user interface (UI) can be viewed as "a function of state", meaning that whenever the underlying data changes, the UI must be recreated or re-rendered to reflect that change.
Types of State
State management can be divided into two categories based on how long a particular state persists in an application.
Ephemeral (local) state: Temporary data contained within a single widget, such as the current page of a PageView or the state of an animation. This is typically handled using the built-in StatefulWidget widget and the setState() method.
App (global) state: Shared data that needs to be accessible across multiple parts of the app, such as user login status, session information, theme settings, or shopping cart contents.
Popular state management solution
Riverpod
BLoC(Business Logic Component)
Provider
Signals
GetX
setState
Navigation and Routing
Moving from one page/screen to another in any application determines the workflow or navigation of the application. The way of handling that navigation in an application is called Routing. Flutter handles the routing process by providing a basic routing class, MaterialPageRoute, and two methods, Navigator.push and Navigator.pop, to define the navigation and workflow of the application.
MaterialPageRoute
MaterialPageRoute is a built-in class used to manage screen transitions according to the Material Design guidelines. It is mainly used with the Navigator class to push and pop screens in the navigation stack.
Code: Navigation.push
Navigation.push() method is used to move to a new screen.
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const MyTargetScreen()),
);
}
Code: Navigation.pop
Navigator.pop() is a standard method used to remove the current screen (root) from the navigation stack and return to the previous screen (if it exists on the stack).
onPressed: () {
Navigator.pop(context);
}