The Navigator 2.0 API has been one of the most controversial APIs I have seen in my software development career. In this series of articles, I aim to convince the readers to use this API in their projects, because it is more Flutterish, it helps to separate concerns and improves the user experience of Flutter Web applications.

The keywords of this series would be declarative API, navigation stack (history stack), Router widget, Navigator widget, app state, and system events. Considering these keywords, I believe the Navigator 2.0 API is summarized best by Micheal Goderbauer:

“Introduce a declarative API to set…


In the sixth part of this series, we focused on integrating the Navigator 2.0 API with the sample apps that we have been building. In all of these sample apps, we used the color and shape border values as path variables in URLs. However, this is not our only option. Instead of path variables, we can use query parameters or fragments in the URLs. In this sample app, we will learn how to parse and restore URLs with query parameters.

  • Part 1: Introduction
  • Part 2: Scroll to Position
  • Part 3: Scroll to Page
  • Part 4: Ensure Visible
  • Part 5: Scroll…


In the previous articles, we focused on implementing a single-page scrollable website from the scroll logic point. In this and the next article, we will explore how to utilize the Navigator 2.0 API to manage the URLs on the browser’s address bar.

If you are not familiar with the fundamentals of declarative navigation, I would suggest taking a break here and starting with my Flutter Navigator 2.0 for Authentication and Bootstrapping


In the fourth part of this series, we explored implementing a single-page scrollable website (SPSW) whose sections are built at once and have varying, unpredictable heights before being laid out. In this article, we will build the same app but this time the sections will be built lazily using the Scrollable Positioned List library by google.dev.

If you haven’t read the previous articles, I would strongly suggest starting from the first part of this series since the implementation details of the common widgets will not be mentioned in this part.


In the second and third part of this series, we explored implementing a single-page scrollable website (SPSW) whose sections are built lazily and have equal height. In this article, we will build an SPSW with sections that have varying and unpredictable heights before being laid out. Instead of building the sections lazily, all the sections will be built at once within a SingleChildScrollView widget.

If you haven’t read the previous articles, I would strongly suggest starting from the first part of this series since the implementation details of the common widgets will not be mentioned in this part.


In the second part of this series, we discussed building a single-page scrollable website (SPSW) using a ListView whose sections are built lazily (on-demand) and have equal height. In this article, the sample app will be very similar to the previous app with one difference: In the ColorSections widget, instead of ListView , we will use PageView .

If you haven’t read the previous articles, I would strongly suggest starting from the first part of this series since the implementation details of the common widgets will not be mentioned in this part.


In the first part of this series, we discussed the options when building a scrollable widget in a single-page scrollable website (SPSW) and explained the sample apps that we will be building. In this article, we will explore building an SPSW using a ListView whose sections are built lazily (on-demand) and have equal height.


Single page scrollable websites are everywhere. In this website design pattern, all the content is presented in one long-scrolling layout that contains multiple sections. Visitors can scroll or jump to a section by clicking buttons of a sticky menu. This pattern is a good fit for small content such as brochure websites, software library documentation, portfolios, and landing pages that are used to convert users [1]. Designers also love this pattern because it is simple, clean, and enables cool scroll animations.


Wizard Dashatar

In the previous parts of this series, we focused on building a navigation stack using the Navigator 2.0 API for the following cases:

  • Application state changes caused by user interactions, authentication state update, and bootstrapping.
  • Popping the current route requests from the operating system (OS).


CODEX

In the third part of this series, we explored the Navigator 2.0 API with the authentication use case. In this article, we handle the bootstrapping process and build the navigation stack accordingly.

Cagatay Ulusoy

Flutter and Android Mobile App Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store