How to use Flutter Navigator 2.0? | Warning: it's complicated

Рет қаралды 32,404

Күн бұрын

Worksheet: github.com/happyharis/navigat...
Answer: github.com/happyharis/navigat...
The new Navigator 2.0 is a little confusing, with the new Navigator and Pages widgets. Is the new navigator an imperative or declarative programming? What is imperative or declarative?
Therefore, this video will these questions and show you how to refactor your Flutter project from a default navigator, to the new one. Should you use the new navigator? That maybe a next video.
Is the default navigator declarative or imperative or both? I think is imperative. I'm open for any suggestions.
👉 Subscribe to our weekly Flutter newsletter:
learnfluttercode.com/newsletter
📱 Pre Sign Up to Learn Flutter App :
learnfluttercode.com/app
Check out our website - learnfluttercode.com/
🔥 Check out our courses - zukunf.com/courses
🖼 Learn Flutter Code Instagram:
/ learn.flutter.code
Haris's LinkedIn - / muhammad-haris-bin-sam...
Haris's Twitter - / thehappyharis
⏰ Timeline:
00:00 - Introduction
00:42 - Difference between Navigator 2.0 vs Navigator
01:21 - Imperative Programming
05:03 - Declarative Programming
05:50 - Convert default navigation to the navigator 2.0
07:40 - onPopPage params
11:42 - What is ValueChanged function?
13:51 - Create page for book
16:11 - Declarative also has some imperative
16:48 - Summary
🎨 Source:
/ learning-flutters-new-...

Пікірлер: 77

@kumarvishalben 3 жыл бұрын

0:35 Forking ohh.... Okay

@TrutleKingAvenger 3 жыл бұрын

Great video, it was clear and simply. I was able to get the main concept of the nav. Keep up the great work!!👍🏿👍🏿

@LearnFlutterCode 3 жыл бұрын

Glad it helps!

@rydmike 3 жыл бұрын

Thanks for this simple and approachable intro to Nav2. As noticed and commented, it is a lot of boilerplate indeed. Reason for that is to enable building navigators for much more complicated cases. For basic stack push/pop and its named variant, Nav1 or packages based on it to even simplify it (eg autoroute, fluro, get) are still very good alternatives. I am looking forward to seeing packages that make using Nav2 simpler and less boilerplaty for some specific more advanced use cases, often related to Web and Desktop navigation and their seamless transition to phone sized navigation. Not only url handling, but eg inserting master/child view page as poppable page when you resize the screen to phone size. Totally doable now that you can easily control the page stack.

@LearnFlutterCode 3 жыл бұрын

No problem. It is a lot of boilerplate. And I would agree that it is for more complicated cases

@serverleung5861 2 жыл бұрын

I really like your method to explain and share in flutter learning (in many of your videos), put it in real life case to make me more easy to understand the logic inside of coding, great works and thanks!

@chordfunc3072 3 жыл бұрын

Not a fan of how most people do navigation... I tend to hide the navigation logic inside the page you are navigating to So when navigating I just call a async handler: final result = await BookPage.navigate(context,book); Then I can handle the result of the popped page in a linear fashion. I think people are overcomplicating navigation... Thanks for the video, nice introduction to the new navigator

@essli9430 2 ай бұрын

Bro you have a such great personality and your explanation is on the point and made the things so easy to be absorbed thanks bro

@ac130kz 3 жыл бұрын

I'll keep using auto_route instead :D

@JanaJaagruthi 2 жыл бұрын

Hi, please Let me know if I add a new page support page totally unrelated to book and doesn't depend on _selected book . On a button click from anywhere take to support page . How can we navigate from any page to support page

@prathamjaiswal2512 2 жыл бұрын

Very well explained Thanks

@florianm5556 3 жыл бұрын

I loved your video man it was cristal clear thanks Maybe a quick code recap would have been perfect at the end :)

@LearnFlutterCode 3 жыл бұрын

Thanks for the idea!

@fenchai4892 3 жыл бұрын

those are some crazy boilerplate code. No thanks I'll keep using nav 1.0

@LearnFlutterCode 3 жыл бұрын

I agree on this.

@arthurlima923 3 жыл бұрын

Is it possible that nav 1.0 will get "obsolete" and we will have to migrate to 2.0? Because I'm currently learning nav 1.0 from an online course.

@MaxweelFreitasdaSilva 3 жыл бұрын

@@arthurlima923 Here in Brazil we belive that it will used just for packages to easely some tasks, and that the "normal user" will continue to use nav 1.0.

@arthurlima923 3 жыл бұрын

@@MaxweelFreitasdaSilva Opa, valeu cara! Sou Brasileiro também. Achei muito complexo o 2.0, espero que depois simplifiquem.

@MaxweelFreitasdaSilva 3 жыл бұрын

@@arthurlima923 Então, com vista nisso a comunidade (Flutterando) está empacotando o nav 2.0 dentro do Modular (pacote que te auxilia com gerenciamento de rotas e injeção de dependências)

@toplevelracing 3 жыл бұрын

What extension of vscode do you use to mark code blocks with white lines? Thanks 🙂

@kanybekmomukeev4116 2 жыл бұрын

Same here

@AamirKhan-zy5yt 2 жыл бұрын

It's simple. * Open VS Code Settings (by pressing ctrl + ,) * In search bar, type "flutter UI guides" * Now TICK the checkbox - (preview flutter UI guides)

@gyhafmih3988 3 жыл бұрын

Tnank you very much... how do you zoom.. is it a shortcut? OR zooming is done while editing the video?

@otaviogaiao8064 3 жыл бұрын

Great video! Now, about the new navigator.... what a mess.

@LearnFlutterCode 3 жыл бұрын

Tell me about it

@ifrit1537 3 жыл бұрын

Does it mean tha the whole application is updated every time a navigation flow is executed?

@robertchan3037 3 жыл бұрын

Can I ask how I can set the initial route (at first launch of the app) to '/home' instead of '/'?

@LearnFlutterCode 3 жыл бұрын

change initial route to '/'

@xabierperez 3 жыл бұрын

thanks man!

@LearnFlutterCode 3 жыл бұрын

Happy to help!

@midhunrajr372 3 жыл бұрын

I am more interested the vs code extension you use to display the errors on the same line. What is the extension called?😁

@MrQooje2 3 жыл бұрын

Error Lens.

@AngelCerveraClaudio 3 жыл бұрын

I thumb up because it is easy to follow as a basic introduction to Navigator 2.0 The best moment is when he says: "Personally, I don't know exactly what onPopPage does". 😀 That comment tells how messy is the new Navigator API.

@Ainigma 2 жыл бұрын

if you press a "BackButton" an event gets triggered to pop the current page. You can use that function to e.g. reload something.

@EntnimraS 3 жыл бұрын

BRILLIANT!!!

@TheCass240 3 жыл бұрын

What vscode plugin gives you the errors inline with the code?

@LearnFlutterCode 3 жыл бұрын

Error Lens in VSCode extension

@pierremarais7669 3 жыл бұрын

Hi I love your videos, one question how do you get the 'red' comments in VSCode while you are typing in commnads please, thanks Pierre

@LearnFlutterCode 3 жыл бұрын

I use the VSCode extension error lens.

@pierremarais7669 3 жыл бұрын

@@LearnFlutterCode thanks a million, I'am looking for a demo on how to use an existing sql database in flutter app

@fazilkilicf 3 жыл бұрын

hi sir, i enjoy watching your videos. I was going to ask something.Which theme are you using?

@LearnFlutterCode 3 жыл бұрын

thanks. material theme.

@rezaasgary1442 3 жыл бұрын

so basically it listens to the change of selected book automatically so we just change the state that's all that's kind of cool with state management its easy

@alrawe261 Жыл бұрын

thanks for this video but i think old one is better

@mohammadzarkasi 3 жыл бұрын

it really is complicated

@silentperson639 3 жыл бұрын

Tutorial on how you made the books app it looks sick

@LearnFlutterCode 3 жыл бұрын

I have not figure out how to make the tab bar, the one you see is fake XD. Other than that, most of the UI is achievable

@srihariayapilla4233 3 жыл бұрын

Make sure you 'fokk' the project !

@raheemadamboev 2 жыл бұрын

yeah i wonder how i can 'fokk' projects, because there are so many i want to 'fokk'

@trapeye3464 3 жыл бұрын

i dont understand lol.. how can u navigate nnext screen

@LearnFlutterCode 3 жыл бұрын

No worries, a lot of people do not understand too.

@trapeye3464 3 жыл бұрын

@@LearnFlutterCode I understand this.. but I not understand that flutter web navigation.. if u kind can give example again that not have id book like a simple navigation to the next screen using navigation 2.0

@mahmoudeslami1145 3 жыл бұрын

I thick it's so f**kable in huge project . just use 1.0 version :)

@LearnFlutterCode 3 жыл бұрын

It depends on your use case

@abdouseck4894 3 жыл бұрын

yep

@innerpeace2520 3 жыл бұрын

in search of gold we lost Dimond be like :p

@Algardraug 3 жыл бұрын

Isn't the level of the audio extremely low?

@LearnFlutterCode 3 жыл бұрын

Thanks for raising the issue. Will take note!

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

why it so complex now? for what?

@ExtraServingsBTS 3 жыл бұрын

Some Javascript developer must have snuck in a #@%&*(&d things up for us.

@LearnFlutterCode 3 жыл бұрын

for simple cases, this method is too complex. however, if you want to have users change the url and sync with your flutter web app, then this is one way.

@ExtraServingsBTS 3 жыл бұрын

@@LearnFlutterCode For any case, this is too complex. I have no problem synchronizing my URL with the existing system & Fluro - and I'm currently exploring ways to get Fluro out of the mix. Someone must be feeling the need for some extra job security, needlessly complicating things so nobody can follow behind them. What ever happened to 'optimize for developer happiness'?