Flutter Navigations and routing Let’s learn how Flutter navigation system works By Ali Yazdi yazdi.dev linkedin.com/in/aliyazdi75

Interrupt me if you have any questions, thanks!

“ Navigation is the key to get their heart! — Ali Yazdi

Most apps contain several screens for displaying different types of information. Navigation and routing screens = routes = widgets

Describe the current UI state Transitioning is done by framework Flutter is a declarative UI Declarative style simply call setState() + + + +

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(), );

Imperative Navigation Navigator.of(context).pushNamed('/login') @override Widget build(BuildContext context) { return MaterialApp( routes: { '/': (context) => Splash(), '/login': (context) => LoginPage(), ... }, ); }

Navigator.of(context).pop() Imperative Navigation

What is Go? Accessing the web app through url path

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 +

Navigator 2.0 Declarative Way

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 +

Let’s see the sample gallery.yazdi.dev

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

Navigator Widget A widget that manages a set of child widgets with a stack discipline. ● pages ● initialRoute ● onPopPage

RouteInformationParser RouteInformation: URI + State (Serializable) class BrowserState { List routesHistory; bool isUnauthenticated; bool isNotVerified; Gallery gallery; Media media; ... toJson(), fromJson() }

RouterDelegate A delegate that is used by the Router widget to build and configure a navigating widget. class AppRouterDelegate extends RouterDelegate 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.

Navigation Structure

Example App Structure

Let’s see the code

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

medium.yazdi.dev github.com/aliyazdi75/gallery Want to learn more

THANK YOU! v