Why Navigator 2.0 Sucks

if anybody from the flutter team ever watches this i think they're doing some great work and while i think the idea for navigator 2.0 is the right one i don't think the execution was perfect also i apologize for the clickbaity title it's a little bit rude but please forgive me for that and now let's get into the video where we'll discuss what navigator 2.0 is why i think the execution wasn't the best and potential ways to make it better let's get into it so the reason i wanted to make this video is because i've heard some bad things about navigator 2.0 but i wanted to try to learn myself to hopefully be able to explain it to you guys about how it actually works and make it a little bit simpler but although i think i have a sort of understanding of how it works i don't really think there's a good way to explain it simply and not only that it's not very simple for me either now before we start i don't want to pretend like i'm the best flutter developer out there like i know everything that there is flutter related i still know there's a lot for me to learn and maybe potentially i'm wrong about some of these points so if you disagree with some of these points please let me know in the comments i would like to learn more about this but i do know most of the flutter topics i've been able to pick up pretty easily and this is one that's tripped me up quite a lot now before we get into just me complaining i want to do a quick run through of what navigator 2.0 is so navigator 2.0 solves four major problems first is declarative versus the imperative navigator 1.0 i have a video explaining the difference between declarative and imperative that i'll release in a video soon but pretty much it's a different way to write code and most of the dark language is written in a declarative way but thus it makes sense for the navigator to be written in a declarative way as well navigator 2.0 also gives you access to the routes deck so you're able to manipulate all your routes no matter where you are in the route stack it fixes some problems with the operating system events especially with nested navigation if you click the back button you can select which navigator you want to use and everything like that and lastly it now has web support so it's able to support the back button and the forward button and some other things as well so now you think navigator fixes those big four problems what's so bad about it the fact that it fixes those four problems just lets you know that it's really a necessary change and something that really needed to happen but like i said the execution of that wasn't the best a navigator 2.0 comes with two different apis for flutter developers to use first one is the pages api now the pages api is fine i don't have any complaints about it it basically just defines your routes and pages that you use in the app it seems a little verbose but i'm not going to complain about that it was easy enough to understand now my main issue comes with the routes api so the first red flag when i was learning about the routes api was that it supports both page based routes and page list routes the page based routes are from navigator 2.0 the page less routes are from navigator 1.0 so the router supports both of them now because of this there needs to be some extra logic to safeguard against navigator 1.0 changes happening within this we won't go too deep into that but i'll show you a little example of it later now the argument for doing this from the flutter team is that we'd still want support for navigator 1.0 and if you're trying to do something simple use navigator 1.0 if you're trying to do something more complex use navigator 2.0 and then basically navigator 2.0 is for the more advanced features that you need first having two navigation systems i think is a little confusing for most people and having a 2.0 kind of makes it seem like there's a better option but most people that are starting with navigation they're obviously going to want to go with the newest navigation system my next big point is i don't believe the navigator 2.0 is only for the advanced features i think as flutter becomes more and more prominent you're obviously going to need the back button on the web even for simple applications but that was just the first red flag that i saw let's go into what router api actually does so it handles the back button it sets the initial route it can push a new route and update the url these are all pretty obvious features that a router would need to do in a navigation system and the router is the one that actually builds the navigator and sometimes uses the pages api if you need and then this is the part where it gets a lot more complex so these are the four apis first is the route information provider which is basically the bridge between the operating system and the router and there is the route information parser which like it sounds parses the route information and there is a back button dispatcher which propagates the android button with the router of choice and the router delegate which is like the center piece of everything router related so it sounds a bit complex well here's the chart to make it easier so we have the operating system which gives the information to the route information provider which then takes that information and parses it so that our route delegate can understand it then once it goes to the route delegate the route delegate is like the thing that figures everything out for you and then we have a very similar flow with the back button so if your operating system if you click the back button it'll take you to the back button dispatcher and that will let the router delegate know what to do with it now in here this is where all the central logic is the router delegate tells the router widget when to update like you remember i said the router actually has the navigator widget in it as well and then we have an app state up here that the router net delegate uses in order to figure out when it should rebuild and things like that in another flutter presentation there's a part here missing where the route delegate has to pass something back here as well i think it has something to do with updating parts of the app and making sure the url updates and all those things and this is about as simple as i can explain it it's manageable if you really dig deep into it it's usable and i also have a bunch of examples more complex examples that you can use in the description but here is as simple of an example as i can make with navigator 2.0 so if you want your whole app to use the router you need to do material app.router you can just call the specific widget router if you want a certain part of the app like that but we're going to do the whole app the router has all the information we talked about route information provider route information parser route delegate back button dispatcher and all of those the back button dispatcher and the route information provider have a default the two that you actually need are the route information parser and the route delegate but first let's take a look at the route information parser which is over here this one's not too bad we have three routes that i named first second and third and this route information parser parses information from the provider and basically returns the route that we need so if we get a url with a backslash make the route first we get our url with slash second route second and then here restore our information is basically the flip of that but this is the delegate logic the route delegate extends the router delegate but we do it with change notifier and with pop navigator route elegant mixin these are here because without these we would have to override five functions and fill all the information for all five overrides this makes it a little bit simpler or you only have to override a couple functions but still it's not that simple if you remember the router builds the navigator that's what we have down here so build the navigator with the navigator key which we create inside this router delegate we create an instance of our configuration basically a state of which route we are in we're able to retrieve that state we're able to set that state and notify listeners because it's a provider and we're able to set new route paths so basically set that state there's a small little override for web application don't worry about this one as much just these are the main things that we need then if you remember i said at the beginning that it implements navigator 1.0 and 2.0 because of that we need this on pop page function this one basically checks if we did a navigator 1.0 pop you execute this function and basically do whatever you want here in this case if we do a pop we're just going to set the configuration or the state in which route we are in to the first route then here we have the navigator key handle and the on pop page handled now using the pages api you can load in your pages into here but i haven't seen one example from the flutter team or from anywhere doing that all the examples have been of them creating the actual pages here within if statements obviously this is probably my own fault i could do more digging and figure out how all that works would have been nice to have an example anyways we have the three pages which is the first page second page and third page the second page and third page only come through if the route that we have is within the correct one and the rest is just simple we get router.of context and we set the configuration to whichever page we want and things work well here's the app we have go to the second page third page back to second page and then the back button of course works takes us back to third second back to the very first page if we go to the third page and click this back button which is a navigator 1.0 pop it'll take us directly back to the first page and things are working that's about as basic of an example as you can get that example is obviously in the description well here's two other github libraries you can use to learn about even better we have carlos hua and he has a very simple more simple looking pain it looks like it should work and then this is a really good repository by dominic he has almost every single 2.0 feature where you can remove pages from underneath and things like that if you do want to dig into 2.0 i would recommend you check this repository kind of figure it out but looking at this repository is so complex okay so maybe you have a handle of what navigator 2.0 is about now let's get to me complaining start off navigator 2.0 is definitely better than 1.0 and these features are necessary you need the back button and the forward button to work in web and it solves the big issues from navigator 1.0 but i think having two options makes it a lot more confusing the argument is navigator 1.0 can still be used for basic things i don't think that's a valid argument because the back button forward button it seems like a pretty basic thing to use if navigator 2.0 was set up in a more simple to use way i could definitely see it being even easier than navigator 1.0 you have all your pages defined you know what's going on it's easier to be debug route problems even for simple apps and i think actually mixing the two makes it even more complex the on pop page function i think would not have to be required if that wasn't the case i could be wrong about that but it could just be an extra feature that is optional instead of required third it seems like we have to do everything manually in order to get the functionality of navigation it seems like i'm using provider to rewrite a whole custom navigation system for myself like technically it's obviously a little simpler than writing a whole system like that but still very verbose and on top of that i don't think of the flutter team did the best job of showcasing it there i haven't seen any examples using pages api with router api which i assume is the intention there didn't seem to be any simple examples every example they tried to show off was a very complex use case which is important obviously since they can do complex things but it would be nice at least for me to understand in a simple way navigator 2.0 seems to be built with the intent of having a package that basically makes it simpler for people to use my question is why need a package when flutter might have been able to just do that as well and there's a lot of packages trying to address this navigator 2.0 issue like flow builder auto route plural and page router and i think routing and navigation is such a core thing of any application that it should be made simple enough to not need to use a separate package or at least the flutter team could create a package that you know is something you can trust and things like that navigator 2.0 is marketed towards to be for more complex stuff but i believe there's a way to make it work for both simple and complex stuff and i think it'd be a lot easier for people to understand all the functionality that people want would be there and be able to use simply and how to do that i think first of all just get rid of 1.0 imperative doesn't seem to be the right way to do it and it seems to just bring in a lot of problems it'll make it simpler so there's only one navigator you know which one to choose add some more default cases for navigator 2.0 maybe some better examples so people could understand it easier and try to reduce complexity where possible i think it'll be better to have one good option instead of two options that have some trade-offs so that's all the complaining for me if you have any suggestions or explanations for where i was wrong please make sure to leave in the comments i'd like to learn more about this maybe there's a reason for all this that i don't know but it seems like i'm not the only one who thinks this is difficult a lot of the comments on the medium articles and videos are pretty rude hopefully mine came off more respectful i think the flutter team is doing an amazing job most of flutter has been very simple to learn and i think this is just the one exception but thank you for watching make sure to check the description for all the links to all the repositories and ways to learn make sure like subscribe and share if you enjoyed the video and thanks for [Music] watching [Music] you

Channel: Tadas Petra

Views: 8,507

Keywords: coder, coding, programming, coding fundamentals, programming fundamentals, OSSU, open sourse, cs university, Navigator 2.0, flutter navigator, auto_route, navigator 2.0, flutter navigator 2.0, flutter, dart, dart programming, flutter programming, navigation in flutter, flutter navigation, complex navigation in flutter, complex app navigation, how to use navigator 2.0

Id: sxo6IcPtsuw

Length: 12min 56sec (776 seconds)

Published: Fri Jan 01 2021

Reddit Comments

[u/Rudiksz]

Some good points. Navigator 2.0 made me take a better look at how I handle navigation in my app.

Luckily both Navigator 1.0 and Navigator 2.0 are "just widgets" so I can safely ignore them and write my own navigation system. With 300 lines of code that manages all my navigation needs in a declarative fashion - (with panels and tabs like vscode has, each with their own navigation stack), I can watch the navigator debate from the sidelines.

[u/kirbyfan64sos]

Iirc navigator 2.0 is more intended to provide more flexibility vs being a navigator 1.0 replacement, so there's nothing wrong with sticking with the latter if you don't need the power.

[u/britannioj]

This article explored how to use these APIs for a specific app, but could also be used to build a higher-level API package. We hope that you’ll join us in exploring what a higher-level API built on top of these features can do for users.

https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade

[u/Riddick4Ever]

I hope filip from flutter will get on to this on boring show immediately...

[u/robschmidt87]

If you ever tried to implement an own Router with JavaScript for web that allows deeplink and state mirroring you will clearly lead to the same API like Navigator 2.0. It's very flexible, fully-declarative, low-level API. That's fine. This allows devs to create different high-level APIs (like Navigator 1.0 API) based on that.

Also your facial expression on the preview image reminds me of someone having a rectal examination, lol.

[u/AlessandroRuggiero]

navigator 1.0 was more dynamic, the 2.0 version is like a pageview but with a different context

[u/greatmasterbeater]

I just use modular_flutter for navigation.

[u/esDotDev]

Great video and I agree overall, couple thoughts: * I think the page-less routes are still useful on top of paged routes, for nav that is ephemeral, like an onboarding or signup flow. Something that has 4 or 5 parts, and you don't really care to maintain as state, but you still want page transitions and backBtn support. * Not sure it's really complex vs simple, it's more like, can you define your app simply via state, then 2.0 works nice, but if you have tons of static routes that can kinda layer themselves in any way, then doing it with 2.0 could be a pit of a mess. * The real problem might be that they did not provide a simple way for the imperative Nav to hook into the OS and the Browser, which then basically pushes you into a state-first declarative approach.

If they had've made this simple system, to talk to and update the OS, we could also have used this to just roll our own custom solutions. Instead, everything is baked into Router, otherwise you're on your own. If you check the src though, it's not actually complicated what it's doing in terms of updating the URL or getting the args, you just have to use some low-level API calls.

[u/Ok_AmosLai]

States_rebuilder gives hope for easier to play with Nav 2.0:
https://github.com/GIfatahTH/states\_rebuilder/issues/249