Core concepts of Navigation in Flutter

We will delve into the core concepts of navigation in Flutter, including routes, navigation stack, the context system and how we can improve the navigations in the web application within the framework or using packages.

Transcript

1. Flutter Navigations and routing Let’s learn how Flutter navigation system works By Ali Yazdi yazdi.dev linkedin.com/in/aliyazdi75
2. Interrupt me if you have any questions, thanks!
3. “ Navigation is the key to get their heart! — Ali Yazdi
4. Most apps contain several screens for displaying different types of information. Navigation and routing screens = routes = widgets
5. Describe the current UI state Transitioning is done by framework Flutter is a declarative UI Declarative style simply call setState() + + + +
6. Declarative Vs. Imperative style // Imperative style b.setColor(red) b.clearChildren() ViewC c3 = new ViewC(...) b.add(c3) // Declarative style return ViewB( color: red, child: const ViewC(), );
7. Imperative Navigation Navigator.of(context).pushNamed('/login') @override Widget build(BuildContext context) { return MaterialApp( routes: { '/': (context) => Splash(), '/login': (context) => LoginPage(), ... }, ); }
8. Navigator.of(context).pop() Imperative Navigation
9. What is Go? Accessing the web app through url path
10. Removing a route underneath in the stack Changing routes stack based on app state + No stack (Go) = no result data Browser forward button Limitations + + + Inconsistent experience using the browser’s back and forward buttons +
11. Navigator 2.0 Declarative Way
12. Push and Pop + Go directly to the route Auth guard Change stack based on route state Scenarios + + + Browser’s back and forward buttons + 404 + Send back result data (Push, Go) + Send arguments to page +
13. Let’s see the sample gallery.yazdi.dev
14. Router Widget listens for routing information from OS • Initial route provided on app startup • A new route obtained when an intent is received • A notification that the user hit the system back button
15. Navigator Widget A widget that manages a set of child widgets with a stack discipline. • pages • initialRoute • onPopPage
16. RouteInformationParser RouteInformation: URI + State (Serializable) class BrowserState { List<String> routesHistory; bool isUnauthenticated; bool isNotVerified; Gallery gallery; Media media; ... toJson(), fromJson() }
17. RouterDelegate A delegate that is used by the Router widget to build and configure a navigating widget. class AppRouterDelegate extends RouterDelegate<AppRouterConfiguration> with ChangeNotifier { @override Widget build(BuildContext context) { var browserState = routerState.browserState!; return AuthGuard( child: Navigator( pages: [...], onPopPage: (...) {...}, ), ); } } Defines app-specific behavior of how the Router learns about changes in app state and how it responds to them.
18. Navigation Structure
19. Example App Structure
20. Let’s see the code
21. Classes 2 3 4 1 RoutersState Routes Parser OuterRouterDelegate 5 InnerRouterDelegate Nested routers Able to add widget on all nested routes Routes for the destinations in a BottomAppBar Routes for a stack of views above it
22. medium.yazdi.dev github.com/aliyazdi75/gallery Want to learn more
23. THANK YOU! v