Requires a pro subscription Pro

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.

Login to leave a rating/review
Download materials
Save for later
Share

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

1
Toggle description

Introduction to the Flutter Navigator 1.0 and its disadvantages.

2
Toggle description

Introduction to Flutter Navigator 2.0

Part 2: Deep Dive Into Navigator 2.0

3
Toggle description

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.

Toggle description

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.

Toggle description

Adding functions to keep the track of and change the State of the app.

Toggle description

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.

Toggle description

Use the newly created app state manager to handle the state of the app and notify any changes in the state of the app.

Toggle description

Create a Router Delegate that configures all the pages which we will display.

Toggle description

Use the newly created Router Delegate to help Navigate our app and manage its State.

Part 3: Use the Navigation

Toggle description

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.

Toggle description

Add the Splash Screen to our pages so that it shows at the start.

Toggle description

Display the Login Screen from the Splash Screen when the app has been Initialised. Display the Sign-up page from the login page.

Toggle description

Log the user into the app & navigate to the home page. Then handle the back button to log the user out.

Toggle description

Using the Rougter Delegate to navigate between pages, navigate to the Cart and Settings pages.

Toggle description

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.

Toggle description

Use the back button to go back to the previous page. The previous page will be decided on the condition of the current page.

Toggle description

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

Toggle description

Introduction to deep links and uses of deep links.

Toggle description

Set up the deep links on our platfrom Android and iOS.

Toggle description

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.

Toggle description

Create Route Information Parser which helps to parse the route and pass the information to the URL.

Toggle description

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.

Toggle description

Check the deep links on Android and iOS devices and navigte to the Detail Screen.