CS310
Mobile Application
Development
Flutter - State Management and Navigation
Outline
● Understand state and how to manage it in Flutter.
● Learn the basics of Stateful widgets and setState.
● Explore navigation between screens using Navigator.
● Build a simple app with multiple screens and dynamic data..
State
State is the data that can change in your app—like a counter’s value or a user’s
input.
In Flutter, managing state means updating the UI when this data changes. There
are many ways to handle state, but we’ll start with: setState
Stateful Widgets and setState
Unlike Stateless widgets, Stateful widgets can change over time. You use setState
to tell Flutter to rebuild the widget with new data.
When _increment is called, setState triggers a
rebuild, updating _count on the screen.
Example
Starter App:
https://github.com/ElifDK/Flutter_Movie_Rating/tree/1
d5bf9b04af56aa02f973650e5b4f274a4c32643
Build a movie rating application
- When you click + button give max 5 star rating
- You can add / remove from your list
Practice Tasks:
- Create reviews / review Card widgets and display
reviews on the screen
- Add remove button to review card with the delete
functionality
Navigation Basics
Apps often have multiple screens—like a home page and a details page. Flutter
uses the Navigator class to manage this.
Push: Add a new screen on top of the current one.
Pop: Go back to the previous screen.
Navigator.push
Navigator.push is a method used to navigate from one screen (or "route") to another by
adding a new route to the navigation stack. The Navigator class manages a stack of
routes, where each route typically represents a screen or page in your app. When you
"push" a new route, it’s placed on top of the stack, and the new screen is displayed.
Navigator.push( context, MaterialPageRoute(builder: (context) => NewScreen()), );
context: The BuildContext of the current widget, which provides information about the
widget’s location in the widget tree. It’s required to access the Navigator.
MaterialPageRoute: A specific type of route that uses a material design transition (e.g.,
sliding in from the right on Android). It takes a builder function that returns the widget
(screen) you want to navigate to, like NewScreen().
Navigator.pop
Navigator.pop is a method used to remove the current route from the navigation
stack and return to the previous screen. The Navigator class manages a stack of
routes (screens or pages) in a Flutter app, and pop is how you "go back.“
Navigator.pop(context);
context: The BuildContext of the current widget, which tells the navigator where
it’s operating.
Navigator. pushAndRemoveUntil
Navigator.pushAndRemoveUntil pushes a new route onto the navigator stack (i.e.,
navigates to a new screen) and removes all the previous routes until a specified
condition is met. This is useful when you want to navigate to a new screen and ensure
that the user cannot go back to any of the previous screens, except perhaps to a specific
one that you define.
Navigator.pushAndRemoveUntil( context, newRoute, predicate, );
context: The BuildContext of the current widget, which provides access to the
navigator.
newRoute: The new route (screen) to push onto the stack, typically created using
MaterialPageRoute or a similar route class.
predicate: A function that takes a Route as an argument and returns a bool. It
determines which routes to keep in the stack. The removal of previous routes stops
when the predicate returns true for a route.
Navigation Stack
A stack is a data structure that organizes
pages using a last-in, first-out (LIFO) approach.
Elements are added and removed from the
top, and only the topmost element is
accessible to the user.
For example, when a user views a grocery list
and taps an item, the GroceryItemScreen is
pushed onto the stack’s top. After the user
finishes editing and navigates back, that
screen is popped off the stack.
* kodeco.com
Routes
MaterialApp has the routes property which is a map that defines the
available navigation routes in your app. It maps route names (strings) to
widget builders (functions that return widgets).
Type: Map<String, WidgetBuilder>
● Key: A string representing the route name (e.g., /home, /settings).
● Value: A function that takes a BuildContext and returns a widget (e.g.,
(context) => HomeScreen()).
MaterialApp(
initialRoute: '/home',
routes: { '/home': (context) => HomeScreen(),
'/details': (context) => DetailsScreen(),
'/settings': (context) => SettingsScreen(), }, )
Routes
The initialRoute property specifies the first route (or screen) that
the app should display when it starts.
When the app launches, Flutter looks at the initialRoute value
and matches it with a route defined in the routes map (explained
below).If initialRoute is set, Flutter navigates to that route
instead of the default home widget.
If initialRoute is not specified, the home property of MaterialApp
is used as the starting point.
Example
Build an app with tree screens and navigate between
them.
Create routes and use named methods
Starter App:
https://github.com/ElifDK/Navigate_Screens/tree/1f7
bfc92d92c6bddab814df9c06ebb6f516166c2
Practice Tasks:
- Create a forth screen and try different Navigator
methods
Resourses
Flutter State Management
Flutter Navigation
