Lecture 12 June 2023

Farrukh Ehsan
Routes
 In Flutter, a route represents a screen or page in your app.
 It defines the mapping between a route name and the widget that should be displayed
when navigating to that route.
 Routes are typically defined within a MaterialApp widget using the routes parameter.
Anatomy of Routes
 Route:
 A route represents a screen or page in your app. It can be defined using a route name and the
corresponding widget.
 Route Name:
 It is a unique identifier for a route. You can use any string as a route name.
 Widget:
 A widget represents the UI for a particular screen or page in your app. It can be a StatefulWidget or
StatelessWidget.
 Routes Mapping:
 It is a collection that maps route names to the corresponding widget. This mapping is defined using the
routes parameter in the MaterialApp widget.
Navigator:
 The Navigator class in Flutter is responsible for managing the navigation stack and
transitioning between screens.
 It provides methods for pushing and popping routes, which allows you to navigate
between different screens in your app.
Anatomy of Navigator (1/2)
 push:
 This method pushes a new route onto the navigation stack, which means it navigates to a new screen. It
takes a Route object as a parameter.
 pushNamed:
 This method is similar to push, but it takes a route name as a parameter instead of a Route object. It
looks up the route mapping defined in the routes parameter of the MaterialApp widget and pushes the
corresponding widget onto the navigation stack.
 pop:
 This method pops the current route from the navigation stack, which means it navigates back
to the previous screen. If the navigation stack is empty, it typically exits the app.
 pushNamedAndRemoveUntil:
 This method pushes a new route onto the navigation stack and removes all the previous routes until a
certain condition is met. It allows you to define a condition based on the route name or a custom
predicate function.
Anatomy of Navigator (2/2)

 pushReplacement:
 This method pushes a new route onto the navigation stack and removes the previous route from the
stack. It is commonly used when you want to replace the current screen with a new screen.
Example
 First create the screens you want to navigate between by extending the StatefulWidget or
StatelessWidget class.
 For example, let's say we have two screens: HomeScreen and DetailScreen.
Define routes
 Routes in Flutter define the mapping between route names and the corresponding screens.
 In the MaterialApp widget, you can define the routes using the routes parameter.
 Let's define the routes for our screens:
Navigate to a new screen
 To navigate from one screen to another, you can use the Navigator class provided by Flutter.
 In our example, we'll navigate from the HomeScreen to the DetailScreen when a button is pressed.
Navigate back to the previous screen
 To navigate back from the DetailScreen to the HomeScreen, you can use the Navigator.pop()
method.
Summary:
That's it! You have now implemented basic screen navigation in Flutter. You can
extend this pattern to navigate between multiple screens in your app.