Declarative Navigation & Routes with GoRouter

A declarative routing package for Flutter that uses the Router API to provide a convenient, url-based API for navigating between different screens. You can define URL patterns, navigate using a URL, handle deep links, and a number of other navigation-related scenarios.

Transcript

1. Etornam Sunu Bright Software Engineer Twitter: @_iamEtornam Linkedin: in/etornam-sunu/ Declarative Navigation & Routes with GoRouter Accra
2. What I’ve developed Achieve (Petra) Bethniel Finance (Bethniel Technologies) WeGoo (Goo Technologies) PaSE Online (Ghana Tech Lab) Accra WayRide (Bilal Engineering) Shepherd (CowTribe) Motito PayLater (Motito Ltd) Tasky (Open source)
4. The Navigator widget handles navigation within our Flutter app. Your screens are basically full-screen widgets, so the Navigator is nothing more than a StatefulWidget handling child widgets in a stack.
5. Navigator 1.0 Accra
6. Here is a basic example of pop and push: the push method takes BuildContext as the first argument and the second argument is a PageBuilder. This example uses MaterialPageRoute, which provides the transition animation and handles route changes
7. Basic Navigation
8. Named Routes
9. Navigator 2.0 Accra
10. Flutter 2.0 comes with revamped navigation thanks in large part to its support for a declarative approach. This makes routing a function of state — i.e., pages change upon state change. Flutter 2.0 also has better support for navigation on the web.
11. Navigator takes a list of pages and displays the last page. You can change its pages by adding or removing pages from the end of the list.
13. GoRouter Accra
14. A declarative routing package for Flutter that uses the Router API to provide a convenient, url-based API for navigating between different screens. You can define URL patterns, navigate using a URL, handle deep links, and a number of other navigation-related scenarios.
15. Features
16. • Parsing path and query parameters using a template syntax (for example, "user/:id') • Displaying multiple screens for a destination (sub-routes) • Redirection support - you can re-route the user to a different URL based on application state • Support for multiple Navigators via ShellRoute - you can display an inner Navigator that displays its own pages based on the matched route. For example, to display a BottomNavigationBar that stays visible at the bottom of the screen • Support for both Material and Cupertino apps • Backwards-compatibility with Navigator API Accra
17. Getting started
21. Navigation
23. Parameters
28. URL Path Strategy
29. By default, Flutter adds a hash (#) into the URL for web apps:
31. After turning off the hash #
32. Web History
34. Other Navigator 2.0 packages Accra
35. Routemaster flouter vrouter beamer
36. Resources Docs https://docs.page/csells/go_router Flutter docs https://docs.flutter.dev/de velopment/ui/navigation LogRocket blog https://blog.logrocket.com/under standing-flutter-navigation-routi ng/ Flutter router http://bit.ly/3OhM2r3 Codemagic blog https://blog.codemagic.io/ flutter-navigator2/ Youtube https://www.youtube.com/ watch?v=G41NdhieUoc&t= 1123s&ab_channel=MajidH ajian CodeLabs
37. Etornam Sunu Bright Software Engineer Twitter: @_iamEtornam Linkedin: in/etornam-sunu/ Thank You! Accra