Lecture 9 Navigation and Routing The navigator widget Flutter has an imperative routing mechanism the Navigator widget and a more idiomatic declarative routing mechanism which is similar as to build methods as used with widgets the Router widget ID: 1048153
Download Presentation The PPT/PDF document "01/04/2022 1 APP010-2 - MOBILE APPLICA..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
1. 01/04/20221APP010-2 - MOBILE APPLICATIONS Lecture 9: Navigation and Routing
2. The navigator widgetFlutter has an imperative routing mechanism, the Navigator widget, and a more idiomatic declarative routing mechanism (which is similar as to build methods as used with widgets), the Router widget.The two systems can be used together (indeed, the declarative system is built using the imperative system).
3. Navigating between screens aka routes01/04/20223Flutter route stack
4. NavigationAnimate a widget across screensNavigate to a new screen and backNavigate with named routesPass arguments to a named routeReturn data from a screenSend data to a new screen01/04/20224
5. 1- Animate a widget across screensIt’s often helpful to guide users through an app as they navigate from screen to screen. A common technique to lead users through an app is to animate a widget from one screen to the next.Use the Hero widget to animate a widget from one screen to the nextHero class: A widget that marks its child as being a candidate for hero animations.01/04/20225
6. Parts of a Hero Transition01/04/20226
7. 2- Navigate to a new screen and back01/04/20227Most apps contain several screens for displaying different types of information. For example, an app might have a screen that displays products.In Android, a route is equivalent to an Activity In iOS, a route is equivalent to a ViewController. In Flutter, a route is just a widget. This recipe uses the Navigator to navigate to a new route.
8. 3- Navigate with named routes01/04/20228In the Navigate to a new screen and back recipe, you can learne how to navigate to a new screen by creating a new route and pushing it to the Navigator. Navigator.pushNamed().Return to the first screen using Navigator.pop().
9. 4- Pass arguments to a named routeThe Navigator provides the ability to navigate to a named route from any part of an app using a common identifier. In some cases, you might also need to pass arguments to a named route.Define the arguments you need to pass.Create a widget that extracts the arguments.Register the widget in the routes table.Navigate to the widget.01/04/20229
10. 5- Return data from a screen- To inform the first screen of the user’s selection so that it can act on that information- You can do this with the Navigator.pop() method using the following steps (example):Define the home screenAdd a button that launches the selection screenShow the selection screen with two buttonsWhen a button is tapped, close the selection screenShow a snackbar on the home screen with the selection01/04/202210
11. 6- Send data to a new screenOften, you not only want to navigate to a new screen, but also pass data to the screen as well. Screens are just widgets.Example:create a list of todos:Define a todo class.Display a list of todos.Create a detail screen that can display information about a todo.Navigate and pass data to the detail screen.https://docs.flutter.dev/cookbook/navigation/passing-data01/04/202211
12. Navigator class - A widget that manages a set of child widgets with a stack disciplineUsing the Navigator APIUsing the Pages APIDisplaying a full-screen routePopup routesCustom routes01/04/202212
13. Nesting NavigatorsAn app can use more than one Navigator.Nesting one Navigator below another NavigatorState Restorationhttps://api.flutter.dev/flutter/widgets/Navigator-class.html01/04/202213
14. Next?Lists & PersistenceAnimation & EffectsPlugins & Integration01/04/202214