Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Declarative Navigation & Routes with GoRouter

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.

Etornam Sunu Bright

November 19, 2022
Tweet

More Decks by Etornam Sunu Bright

Other Decks in Programming

Transcript

  1. 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)
  2. 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.
  3. 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
  4. 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.
  5. 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.
  6. 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.
  7. • 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
  8. 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