Flutter Navigator 2.0: What and Why?<\/h2>\n
Navigator 2.0 is a declarative API created by flutter as opposed to Navigator 1.0, an Imperative API, though, at root, it also works in an imperative style.<\/p>\n
Limitation of Navigator 1.0<\/h3>\n
In navigator 1.0, we were provided a stack to which we could PUSH or POP pages which was pretty simple and convenient until our application had simple routing that is few screens and didn\u2019t need to be used on the web.<\/p>\n
The problem started when we were required to make complex applications, implementing \u2018deep linking,\u2019 directly going to a product page from notifications, O.S events handling, and URI parsing for Flutter web back button handling.<\/p>\n
Why Flutter Navigator 2.0?<\/h3>\n
Then came Navigator 2.0, which is declarative, i.e., you get more control over the Navigation stack; using nav 2.0, we control the stack as per our app state and handle back button events fired by O.S. Using this, we do not only can PUSH and POP from the top, but from anywhere we wanted to by providing a list of pages and URI parsing by using routeInformationParser and provider.<\/p>\n
Tutorial Goal<\/h2>\n
In our tutorial, we are going to build a simple demo application consisting of two screens:<\/p>\n
- \n
- Screen 1 for Anime Characters:<\/strong> It is going to show a list of anime characters.<\/li>\n
- Screen 2 for Character Details:<\/strong> It is connected to screen 1 via callback function and shows detail about the selected character from screen 1.<\/li>\n<\/ul>\n
Goal:<\/strong> To demonstrate the working of Navigator 2.0, i.e., changing screens based on our application state (selectedChar != null)<\/mark> without using simple POP & PUSH and by passing our stack of pages to MaterialApp via Navigator<\/p>\n
Developing a Flutter application is easier and hustle-free with Bacancy!<\/span>
\nAre you looking for top-notch Flutter developers for your requirements? Trust our expertise! Contact us today and hire Flutter developer<\/a>.<\/i><\/strong><\/p>\nFlutter Navigator 2.0 Example<\/h2>\n
Navigator 2.0 adds extra classes to implement the app screen as a product of the app state and to be able to parse routes from URLs for flutter web. Navigator 2.0 provides a new declarative API design, i.e.,<\/p>\n
- \n
- Pages:<\/strong> Pages are for existing Navigator. Immutable pages that are used to set Navigator history stack. It describes the pages that need to be placed in the navigator history stack.<\/li>\n
- Router:<\/strong> It is a new widget that wraps the navigator and configures its current list of pages per app state. It can also listen to events from the operating system and configure the navigator accordingly.<\/li>\n<\/ul>\n
In our example: Flutter Navigator 2.0, we will basically develop a Flutter application and learn how to add pages and routers.<\/p>\n
There are four classes as mentioned below:<\/p>\n
- \n
- RouterInformationParser<\/li>\n
- RouterDelegate<\/li>\n
- RouterInformationProvider<\/li>\n
- BackButtonDispatcher<\/li>\n<\/ul>\n
We will talk about them in another blog as it will create unnecessary confusion. For now, we will keep this tutorial simple but assure to write about them in the future in detail.<\/p>\n
![\"Flutter](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/06\/II-1.jpg\")
<\/p>\nThese are the classes that we will be working with.<\/p>\n
- \n
- Anime_Characters screen:<\/strong> It shows the list of anime characters.<\/li>\n
- Characters_Details screen:<\/strong> On selecting particular character, a new screen is pushed onto the stack and displays the anime to which that character belongs.<\/li>\n
- Anime_Char_Model:<\/strong> It is just a model class for anime characters, with name, anime, and a constructor.<\/li>\n
- App class:<\/strong> It is a simple class responsible for Material widget and handling all navigating and tracking app state accordingly.<\/li>\n<\/ul>\n
- Characters_Details screen:<\/strong> On selecting particular character, a new screen is pushed onto the stack and displays the anime to which that character belongs.<\/li>\n
- Anime_Characters screen:<\/strong> It shows the list of anime characters.<\/li>\n
- Router:<\/strong> It is a new widget that wraps the navigator and configures its current list of pages per app state. It can also listen to events from the operating system and configure the navigator accordingly.<\/li>\n<\/ul>\n
- Screen 2 for Character Details:<\/strong> It is connected to screen 1 via callback function and shows detail about the selected character from screen 1.<\/li>\n<\/ul>\n