Flutter Navigator 2.0 for Beginners

Рет қаралды 53,055

3 жыл бұрын

Kilo Loco goes over the easiest way to get up and running with navigation in Flutter using the Navigator 2.0. In this tutorial, he will cover how to navigate to and from pages, as well as how to detect which page has been popped.
** Show Notes and Links **
Project Files:
github.com/Kilo-Loco/content/...
Kilo Loco on Social Media:
www.kiloloco.com
KZfaq - / kiloloco
Twitter - / kilo_loco
Instagram - / kilo_loco
#flutter #dartlang #flutterdev

Пікірлер: 56

@tobycettera 3 жыл бұрын

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 3 жыл бұрын

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 3 жыл бұрын

That logic does not seem to escalate well for larger apps

@FilledStacks 2 жыл бұрын

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 2 жыл бұрын

@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.

@samrystrom3532 3 жыл бұрын

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

@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.

@TheMacpardo 3 жыл бұрын

Thank you for the great tutorial!

@DanFlorio 3 жыл бұрын

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.

@bobby9568 3 жыл бұрын

just found this amazing channel! subscribed!

@unnikrishnanadoor 3 жыл бұрын

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

@FilledStacks 2 жыл бұрын

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

@terminalterm2367 2 жыл бұрын

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

@FilledStacks 2 жыл бұрын

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

@George-or3uv 3 жыл бұрын

This was a big help to me, thanks.

@marodonthemorone 3 жыл бұрын

Great tutorial!

@sergey_molchanovsky 2 жыл бұрын

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

@bernardnaques2951 2 жыл бұрын

really nice explanation, thanks !

@kyleaustin2728 3 жыл бұрын

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

@RobertoOrtis 3 жыл бұрын

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

@tranminhhaifet 3 жыл бұрын

Thank you!

@FlutterMapp 3 жыл бұрын

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 ✌🙌

@alexboyd2693 2 жыл бұрын

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.

@antonyaz3506 Жыл бұрын

Its better video about Navigator 2.0 )) Thank you

@PriyaSharma-lq2dw 2 жыл бұрын

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?

@user-ok2qc3ng9d 3 жыл бұрын

Thank you

@SravanKumarPabolu 3 жыл бұрын

Thank you.

@Kilo_Loco 3 жыл бұрын

My pleasure!

@hakanviajando 2 жыл бұрын

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

@allaboutpv 2 жыл бұрын

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.

@abdulrahamanolatunde6548 2 жыл бұрын

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 🙏🏼

@jayamuruganj5091 3 жыл бұрын

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

@francescotagliavento8081 3 жыл бұрын

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

@Kilo_Loco 3 жыл бұрын

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

@aimensayoud8563 2 жыл бұрын

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

@josma3436 2 жыл бұрын

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 2 жыл бұрын

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.

@CanalMateriaGriz 2 жыл бұрын

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

@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

@MuhammadAli-zv5vz 3 жыл бұрын

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

@Prashant-7 3 жыл бұрын

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

@Kilo_Loco 3 жыл бұрын

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

@NickRossik 3 жыл бұрын

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

@Kilo_Loco 3 жыл бұрын

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

@benjaminsmith9943 5 ай бұрын

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?

@donathmm3881 3 жыл бұрын

The old navigator is much better and easier than this stuff

@Kilo_Loco 3 жыл бұрын

Easier maybe, but inconsistent with the declarative paradigm of Flutter

@uris77 3 жыл бұрын

@@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 3 жыл бұрын

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