Flutter Navigator 2.0 for Beginners

[@tobycettera]

Thanks this was the most basic use of Nav 2.0 I have seen and really helped me understand the base principle. all other examples I have seen use the delegates to generate pages lists. Nav 2.0 is more complicated than routes but that is because it is attempting to unify browser navigation with phone app stack style navigation. In apps you always have to go from this screen to that screen to get to a third screen (imperative). In a browser you can go straight to the deeper screen but logically Nav 2.0 allows you to declare (declarative) what the nav state would look like. That is where the complexity comes from and many people are just trying to use pages in the same way they did routes so it looks like extra work for no gain.

[@PauloHenriqueNonaka]

Thanks for making this comment. When Nav 2.0 was released that was exactly my thought: extra work for no gain. Over complication for no reason apparently. Now, we're enabling our mobile app to be web as well and we just faced this situation where we would like to navigate directly to some specific page since we are now in a browser, what makes sense. We migrated to Flutter 2 and published to the web, but deep linking on the browser isn't working at all. I asked myself then if the culprit was the Nav 1.0 and it seems so. What I think is very strange is why nobody mention that you need Nav 2.0 in order to make deep linking to work on Flutter web. At least I couldn't find any reference to it in the documentation and it has only been my guess so far that I should migrate in order to make it work. My app is a big and would be very helpful if it was clear on the docs before I make this effort of migrating.

[@danielelmuneco1994]

That logic does not seem to escalate well for larger apps

[@FilledStacks]

I think it won't scale well at all. I'm busy exploring it now, and i think it's not gonna do very well for production sized apps.

[@FilledStacks]

@Taras Tataryn I have tried, but I couldn't. we don't use it in production so I have nothing extra to add to tutorials that are already out there.

[@tthtlc]

thank you: 10 mins short video focusing on key concepts and key parts of the source codes is GOOD!!! Other video is like HOURS going through LINE BY LINE of flutter.....OMG!!!!! you are fantastic.

[@unnikrishnanadoor]

Seems like it's overcomplicated. can't we do it in simple steps? do we really need this much complication?

[@FilledStacks]

I'm trying to figure that out now to make a tutorial. this is waaay to complicated.

[@terminalterm2367]

@@FilledStacks I went looking for your tutorial, but you haven't made it yet :(

[@FilledStacks]

@@terminalterm2367 I don't use it in production so I have nothing to share that other teachers hasn't shared already.

[@DanFlorio]

Thanks. A good basic intro to a topic that has been kicking my ass. There are lots of examples out there, but none of them work out of the box, like this one did (mostly). This code isn't null-safe. If you copy the code from the git repo don't forget to add // @dart=2.9 at the top of your file to remove the errors.

[@sergey_molchanovsky]

Thanks for the video. This explains a new Navigator and its Page API. I'd like to see Router and RouterDelegate explanation too.

[@RobertoOrtis]

It doesn't make much sense to use 2.0 if you are not using web

[@kyleaustin2728]

As someone named Kyle, I oddly appreciate your random name selections.

[@FlutterMapp]

Damn, that is some Legendary explanation! Kilo, do you know about the Red Button under your video? Apparently I clicked on it and now it is grey. Good one man ✌🙌

[@antonyaz3506]

Its better video about Navigator 2.0 )) Thank you

[@samrystrom3532]

Great video - really get the principles at work with the new Navigator. Thanks.

[@bobby9568]

just found this amazing channel! subscribed!

[@alexboyd2693]

Mr. Loco, I'm fairly new to Flutter and have been trying to lock down the navigation paradigm that we will use for our app. With the Navigator 2.0 approach, I see some benefits, but I'm wondering how it will work for a large app? I can see that list of pages:[] becoming quite large and non-intuitive if it has a bunch of flow control code in it. Additionally with the onPopPage. Is it worth going this route (haha) or would using Advanced named routes with onGenerateRoute (per flutter navigation documentation) be better? I have found that I can't popUntil() with the onGenerateRoute method, though that may be a lack of understanding on my part.

[@allaboutpv]

how do you navigate to different dart pages? I have 8 different dart pages and I am trying to connect them all with a drop-down page but cant figure it out it just gives me this error: Navigator operation requested with a context that does not include a Navigator.

[@aimensayoud8563]

thanks for the explanation it was very clair , but why we need to use this navigator when the old one was much simple and doesn't need all that code

[@PriyaSharma-lq2dw]

Could you please explain why does the pages parameter of navigator is a list instead of just one page? The navigator is being built every time there is a change in the app state, so why not just put one page in the navigator corresponding to the current app state? Why have a stack of pages? We are not calling pop anyway, so when will the lower pages in the stack be displayed?

[@swatirai1]

i am using navigator 2.0 for navigation but the problem is that when i clicked back button of android device then app getting close instead of taking back to previous page how to solve this problem plzz explain this

[@CanalMateriaGriz]

How do you use Navigator 2.0 with web? Like, how do I specify the URL navigation?

[@jayamuruganj5091]

pls done the web app using navigator 2.0 showing the url path when the page will change

[@TheMacpardo]

Thank you for the great tutorial!

[@abdulrahamanolatunde6548]

Hi Kilo, can you create a 5 screen app using Navigator 2.0? Can come in a auth kind of app and some navigations around after logging in. This will really help the learning 🙏🏼

[@George-or3uv]

This was a big help to me, thanks.

[@hakanviajando]

Thanks, great video. Flutter's own doc is actually not enough for this feature and is complicated.

[@MuhammadAli-zv5vz]

Too much difficulty, Its very cofusing and difficult for understanding. How can we use Navigation in Tabbar App and in complex apps?

[@josma3436]

So, you have to control the state of 30 - 40 views each one? can you in certain views navigate imperatively??, because with this approach there must be a global state where you can set conditions to stack or not a given view.

[@ElteHupkes]

This was exactly my initial concern after watching this, that one top level class seems to have a lot of responsibility. On the other hand, in order to have a single declared route state, there needs to be... a single declared route state 😛. I guess it could be structured such that the navigator only contains the state necessary to set up what the views are, and not the state of the views themselves.

[@bernardnaques2951]

really nice explanation, thanks !

[@benjaminsmith9943]

Well, guys, this project is not null safe, and the Dart SDK as I write this (3.2.3) only supports null safety. This makes this video, for me as a relative newbie, largely useless. I spent a good part of the last hour chasing fields being nullable and being unable to pass this or that variable because it could be null before giving up. Author: would you please update this so peeps like me can benefit?

[@evanpease6732]

Navigation in flutter is the worst I’ve ever encountered. Really needs to be rethought and redesigned from the ground up. It’s not usable.

[@marodonthemorone]

Great tutorial!

[@tranminhhaifet]

Thank you!

[@donathmm3881]

The old navigator is much better and easier than this stuff

[@Kilo_Loco]

Easier maybe, but inconsistent with the declarative paradigm of Flutter

[@uris77]

@@Kilo_Loco Hmm, I agree with the op. The new navigator isn't declarative either. There is a lot of imperative code that needs to go inside `onPopPage`. It is a matter of tradeoffs I guess. I prefer the old navigator, because I can quickly see a list of routes and navigate to the main pages on the app from the router itself. It can be done with this new navigator through `pages` , but logic in `onPopPage` can obscure that a bit and I find it a bit error prone. I wished the new navigator were a bit smarter and avoided the `onPopPage` setup. Anyway, thank you for the tutorial. I enjoyed it.

[@testingcrap5419]

@@uris77 You cant mantain the state of the navigator after refreshing in the browser with Navigation 1.0. The declarative approach is way better.

[@NickRossik]

I recently updated Xcode and all my applications don't build. It's time to move to flutter.

[@Kilo_Loco]

Haha well I don’t think that switching platforms is the answer to that problem. I can confidently say that native iOS development is the most stable platform with the least amount of problems. That said, flutter is a great cross platform option that works really well

[@francescotagliavento8081]

Should I use adobe xd with flutter ? what do you think?

[@Kilo_Loco]

The design program doesn’t really matter tbh. Any tool that helps you visualize the product will work. I use Sketch, and will sometimes recommend Figma because it’s free. There’s nothing wrong with XD tho

[@Prashant-7]

Should I start to learn flutter , I am iOS developer working with swift

[@Kilo_Loco]

If you want.... I like it and knowing multiple languages/frameworks will make you more aware of different programming techniques

[@АндрейИльченко-т7ж]

Thank you

[@SravanKumarPabolu]

Thank you.

[@Kilo_Loco]

My pleasure!

[@joshlim8595]

Very confusing