Scribd
Upload
20 views

Flutter State Management

This document discusses state management and navigation in Flutter applications. It defines application state as information that persists for the entire app lifecycle, like a logged-in user or shopping cart contents. Ephemeral state is temporary, like animation states. Flutter supports state management through StatefulWidget and scoped_model. The document also explains that navigation routing defines an app's workflow, and Flutter uses MaterialPageRoute, Navigator.push(), and Navigator.pop() to handle navigation and routing between screens. Sample code demonstrates building a product browsing app with navigation between a product listing page and individual product details pages.

Uploaded by

Zac Tyler
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Flutter State Management

This document discusses state management and navigation in Flutter applications. It defines application state as information that persists for the entire app lifecycle, like a logged-in user or shopping cart contents. Ephemeral state is temporary, like animation states. Flutter supports state management through StatefulWidget and scoped_model. The document also explains that navigation routing defines an app's workflow, and Flutter uses MaterialPageRoute, Navigator.push(), and Navigator.pop() to handle navigation and routing between screens. Sample code demonstrates building a product browsing app with navigation between a product listing page and individual product details pages.

Uploaded by

Zac Tyler
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

State Management

Jaymark A. Yambao
Introduction
Managing state in an application is one of the most important and necessary
process in the life cycle of an application.
Let us consider a simple shopping cart application.
• User will login using their credentials into the application.
• Once user is logged in, the application should persist the logged in user
detail in all the screen.
• Again, when the user selects a product and saved into a cart, the cart
information should persist between the pages until the user checked out
the cart.
• User and their cart information at any instance is called the state of the
application at that instance.
Introduction (cont.)
A state management can be divided into two categories based on the
duration the particular state lasts in an application.
• Ephemeral − Last for a few seconds like the current state of an
animation or a single page like current rating of a
product. Flutter supports its through StatefulWidget.
• app state − Last for entire application like logged in user details, cart
information, etc., Flutter supports its through scoped_model.
Navigation and Routing
In any application, navigating from one page / screen to another defines the work flow of the
application. The way that the navigation of an application is handled is called Routing. Flutter
provides a basic routing class – MaterialPageRoute and two methods - Navigator.push and
Navigator.pop, to define the work flow of an application.
MaterialPageRoute is a widget used to render its UI by replacing the entire screen with a platform
specific animation

Here, builder will accepts a function to build its content by suppling the current context of the application.

Navigation.push is used to navigate to new screen using MaterialPageRoute widget.

Navigation.pop is used to navigate to previous screen.


Navigation and Routing
Let us create a new application to better understand the navigation concept.

flutter: assets: -
Create a new Flutter application in Android studio, product_nav_app assets/appimages/floppy.png -
assets/appimages/iphone.png -
•Copy the assets folder from product_nav_app to product_state_app assets/appimages/laptop.png -
and add assets inside the pubspec.yaml file. assets/appimages/pendrive.png -
assets/appimages/pixel.png -
assets/appimages/tablet.png

•Replace the default startup code


(main.dart) with our startup code.
Navigation and Routing
•Let us create a Product class to organize the product information.

•Let us write a method getProducts in the Product class to generate our dummy product
records.
Navigation and Routing
•Let us include our new widget, RatingBox.
Navigation and Routing
•Let us modify our ProductBox widget to work
with our new Product class.
Navigation and Routing
•Let us rewrite our MyHomePage widget to
work with Product model and to list all
products using ListView.
Navigation and Routing
Here, we have used MaterialPageRoute to
navigate to product details page.

• Now, let us add ProductPage to show the


product details.
Navigation and Routing
Run the application and click
any one of the product item.
It will show the relevant
details page. We can move
to home page by clicking
back button. The product
list page and product details
page of the application are
shown as follows −

You might also like