Flutter Navigator 2.0
Navigator 2.0 is Flutter’s new declarative API for the Navigator widget. Learn how to migrate an app from old navigation patterns to use Navigator 2.0 and see how to make your app work with the URL bar and browser history in Flutter Web. By Shrihriday Bhagwat.
Who is this for?
Experienced Flutter developers who want to understand and effectively use Flutter’s new navigation APIs. This course expects you to understand the basics of state management and navigation in Flutter.
Covered concepts
- Introduction To Navigator 1 and 2
- Navigator 2.0 To navigate between pages
- Managing state of the app with provider
- Managing the data with provider
- Creating Router Delegate and Router Parser
- Connecting the State of the app with our Router
- Converting the URL to object and Vice Versa
- Flutter Web Support
- Deep Links
Part 1: Introduction to Navigator 1.0 & 2.0
Introduction to the Flutter Navigator 1.0 and its disadvantages.
Introduction to Flutter Navigator 2.0
Part 2: Deep Dive Into Navigator 2.0
This video will we will come to know which app we are going to build in this course. The use of the app, all the screens and functionality the app has. So that the user will have a clear idea of the app.
An App has different states which the user has to tackle to make sure the app runs smoothly. Assign App State and Notifiers to notify the changes in the app.
Adding functions to keep the track of and change the State of the app.
Just like the app state we also have to manage the data our app has. The Book Manager Class will help us to manage the data, and update the data if needed.
Use the newly created app state manager to handle the state of the app and notify any changes in the state of the app.
Create a Router Delegate that configures all the pages which we will display.
Use the newly created Router Delegate to help Navigate our app and manage its State.
Part 3: Use the Navigation
Our Navigator and Router Delegate takes Material Page which we do not have so it’s necessary to convert Normal Screens To our Material Pages.
Add the Splash Screen to our pages so that it shows at the start.
Display the Login Screen from the Splash Screen when the app has been Initialised. Display the Sign-up page from the login page.
Log the user into the app & navigate to the home page. Then handle the back button to log the user out.
Using the Rougter Delegate to navigate between pages, navigate to the Cart and Settings pages.
The Detail Page shows a specific Book that we have selected. Add the selectedBook variable and then navigate to Detail Screen where we show all the details of the app.
Use the back button to go back to the previous page. The previous page will be decided on the condition of the current page.
The back Button on the android is closing the app. We have to fix this with the Back Button Dispatcher.
Part 4: Deep Links & Web Urls
Introduction to deep links and uses of deep links.
Set up the deep links on our platfrom Android and iOS.
Just like an app has a state, a navigation has a state. Create a navigation state object to keep track of the navigation state. This will be an intermediary between a URl String and our App State.
Create Route Information Parser which helps to parse the route and pass the information to the URL.
In web app the application must react to the URL that we add on the browser address bar. This creates a link between the String URL and Application Object to be used in the application.
Check the deep links on Android and iOS devices and navigte to the Detail Screen.