Flutter Tutorial - NEW Material You Navigation Bar | The New Way | Flutter Navigation Bar

[@HeyFlutter]

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/material_you_navigation_bar

[@ritiksaxenaofficial]

I was about to sleep but saw this notification. I like Material You design and loved this video 💙

[@SanusiAdewale]

Thank you for this, short concise and covers everything necessary. I love it!

[@HeyFlutter]

Glad you liked it, @SanusiAdewale 😀

[@pandaengine]

I was looking for this for a while now. It looks lovely! I am excited about the full Material You release.

[@thushankalana4940]

Great lesson❤️❤️❤️ Thank you so much Sir ❤😊

[@HeyFlutter]

You are welcome, @thushankalana4940 😊

[@abhishekagarwal6750]

best navigation bar tutorial on the net!

[@abhishekagarwal6750]

@@HeyFlutter hey mike, I have another question how can i fetch data of current user from my firebase database??, I am developing an application in which there is a login screen and when user gets inside the home screen, and accesses his profile section then his whole profile shows up, all data should be fetched from firebase database. Can you help me with this??

[@phonghuynh3551]

Always clearly and simple to understanding! 💙

[@khanisrarahmedalihusain]

Awesome as always 😊. Thanks for making such nice tutorial

[@obeddougan1505]

Thank for this tutorial

[@wadalamen14]

Dr. Johannes Milke 😁 No words to say...

[@Hitogiri]

Just wat i was looking for. .. thank you, now i know what am going to do today

[@hawarhekmat1174]

ur the best flutter teacher, thanks for your awesome explanation 🙏

[@isheriff82]

amazing, so much easier to understand ur lessons!

[@alihussainabro7694]

johannes Milke Thanks

[@HeyFlutter]

Thanks, also Ali Hussain Abro! 🙂

[@frankeealcaayamanansin186]

WOW! I would gladly try this out!

[@Apenschi]

And another helpful video! You put out the videos with an unbelievable pace! I always wonder, how long you can keep it that way! Keep it up!

[@ranjanadeore2957]

Everything is temporary morning with your video is permanent

[@srunrathaes128]

Love your teaching

[@HeyFlutter]

Glad you liked it, @srunrathaes128 😀

[@stellarrelax.3495]

TBH I haven't found more videos on flutter in any other channel. This really helps. You're doing great. Keep up the good work Mike.

[@2mvX]

thanks for this tutorial!

[@physicslakmal3754]

Great Work. Thank you very much!

[@liqiye368]

Thanks a lot man you saved my day.

[@osamamicro1103]

So amazing and clear content, Keep it up!

[@mohammadshahid9820]

Good content as always bro. Thanks

[@Pedro5antos_]

Thanks (again)!!

[@olivier1116]

Hello @JohannesMilke, at 3.43 you show that pages contains their own Scaffold Widget so there are nested Scaffold (One scaffold in the main.dart and the body of this Scaffold holds another Scaffold). But in Flutter documentation it is said that "The Scaffold is designed to be a top level container for a MaterialApp. This means that adding a Scaffold to each route on a Material app will provide the app with Material's basic visual layout structure. It is typically not necessary to nest Scaffolds. For example, in a tabbed UI, where the bottomNavigationBar is a TabBar and the body is a TabBarView, you might be tempted to make each tab bar view a scaffold with a differently titled AppBar. Rather, it would be better to add a listener to the TabController that updates the AppBar" source : api.flutter.dev/flutter/material/Scaffold-class.html So why do you use nested Scaffolds here?

[@HeyFlutter]

Thank you, olivier delmas! 🙂. I didn't understand your question properly. However, if you want to know about why there is nested scaffold just remove the scaffold widget, run the app. You will know the difference.

[@yumyumviral1190]

Thank you

[@HeyFlutter]

You are welcome, YumYum Viral!

[@mdshahidali3132]

Awesome Sir.Please Make more Video of design

[@luisayestaran175]

What an awesome tutorial. It's great how you're keeping up to date with Google's latest design trends, bro. Could you make a video on how to build the Material You search bar, please, man? Thanks!

[@md.ruhulamin7963]

Thank you sir.

[@Saif_mohammed1]

شكرا لك يا صديقي انت مذهل الله يبارك بك

[@HeyFlutter]

Glad to hear that, Thank you فن الحياة | The art of life! 😊

[@AnyThink5]

very useful video ❤

[@HeyFlutter]

Glad you liked it, @AnyThink5 😀

[@zanovis]

Your videos rock!

[@HeyFlutter]

Glad you liked it, @zanovis 😀

[@mojtabasaebi6096]

Thank you LOve you

[@obeddougan1505]

Please can U make video on how to make music player control show on lock screen... Please

[@prayandcode]

Nice one bro

[@aytunch]

Thanks Johannes, what about material you scroll/list view?

[@rog0079]

Great as always! Can you do an animation series like Flutter using Rive/Flare/Lottie animations for beginners? It would be great!

[@rog0079]

@@HeyFlutter I see you've already created the videos on the same... You're exceptional! Keep up the good work sir! :)

[@evansgitonga3046]

what about persistent navigation bar

[@luchitv01]

Please do a video on how to use photo manager package to make custom image picker

[@DguruZ]

Very useful video bro! . I just have a question, How can I preserv the state of a Page ?

[@tranthanhtra1312]

ohh thank you

[@HeyFlutter]

You are welcome, @tranthanhtra1312 😊

[@sorunkehassan4531]

Great video love your contents but if want to push another screen ,still have the bottom navigation and state, how can I do this ?

[@Er.MeetPatel]

How Jump Between Pages Programmatically In Navigation Bar

[@mdshahidali3132]

Sir please create a video on Develop own package and plugin in flutter

[@LuminousAsianBeauties]

yeah. amazing. maybe you can some animation tutorial more💪💪💪

[@user-vq7du3in2x]

Could you make a video on how to let the user change the text size of the hole app in a app settings page

[@vandanaverma1399]

how to change selected text color in navigator-bar

[@MarkyMarking]

Is it persistent?

[@aborayan]

thank you so much but how i can add bottom admob ads in app up or down bottom navbar

[@HeyFlutter]

Thank You أبو ريان - Abo Rayan - تعلم اللغة الاسبانية مع! Follow this link: stackoverflow.com/questions/61544608/ads-overlapping-bottom-navigation-in-flutter I hope you will get your answer 🙂

[@AlwaysMore]

can you make a tutorial about notification between mobile to another mobile using firebase by using mobile tokens ?

[@rohaitastanoli3414]

How to change icon color?

[@dandusaivarma2416]

Hi Milke how do i change the icons size and icons color on selected . In default icons are in black. Thanks in advance

[@gangasunny1908]

Does this feature support in android 11 phones???

[@花志雄]

Sir, why the source code compile occurred error? The method 'NavigationBarTheme' isn't defined for the class, The method 'NavigationBarThemeData' isn't defined for the class, The method 'NavigationBar' isn't defined for the class, The method 'NavigationDestination' isn't defined for the class, I must change the sdk to channel mater to fix these error?

[@rajenderkatkuri7642]

Is this new Navigation Bar only for Android or its works for iOS as well ?

[@dimasismu5738]

are U have a tutorials for signup/register in local db and login without firebase, thanks

[@rakibulhasanjoy7158]

If in profile view, there is a button, and navigate another page, then how can I show bottom navigation bar?

[@HeyFlutter]

Thank You @rakibulhasanjoy7158! Follow this link: pub.dev/packages/persistent_bottom_nav_bar I hope you will get your answer 🙂

[@DilipKumar-p1e7c]

how can I keep BottomNavigationBar on each page because whenever I navigate to some route the BottomNavigationBar disappears.

[@HeyFlutter]

Thank You @user-ok3uv1qx2r! Follow this link: pub.dev/packages/persistent_bottom_nav_bar I hope you will get your answer 🙂

[@tripsam4655]

Is there a way to put an empty placeholder item under FAB to adjust bottom navbar spacing between items to include FAB?

[@tripsam4655]

@@HeyFlutter Yes. I actually wanted to put a floating action button on the bottom navbar. I have docked it in the center. But the spacing between other tabs in bottom navbar obviously isn't adjust for the floating button. This makes the button look a bit awkward on the tab. Is there a way to pass an empty tab in the middle so that floating button can take its place?

[@rashidkhan1845]

sir i have already a body so where do i put body:screens[index],

[@mrunalvala4317]

Can we hide this navigation bar with scroll down?

[@HeyFlutter]

Thank You Mrunal Vala! Follow this link: stackoverflow.com/questions/50353640/hide-bottom-navigation-bar-on-scroll-in-flutter I hope you will get your answer 🙂

[@darkhorrormystery7000]

Brother, I am working on a Flutter Android application. And I have added a side navigation bar on that application. Which includes Rate Us, Share App, Privacy Policy, Exit. But I tried many things but could not bring these buttons to working condition, can you tell me? How can I bring them into working condition?

[@HeyFlutter]

Thanks for the idea @darkhorrormystery7000 😀, i have added it in my list of future videos

[@sousanonymoi]

how to remove the blue colors from the selected icon?

[@capybaracode]

is it possible to make navbar disappear on certain page with this method?

[@HeyFlutter]

Hey, @capybaracode 🙂 this support is provided in material you design, if your app supports material you, you can definitely use it

[@evanhossain1618]

"flutter channel master" couldn't run in my vs code terminal. When run that command an error shows that is "git: fatal: 'origin/master' is not a commit and a branch 'master' cannot be created from it Switching channels failed with error code 128." how can I do that, please suggest.

[@learnwithsajjat]

How much money your all course in 1 year

[@hackerwhite7957]

and what how we do style for unselected lable

[@HeyFlutter]

Hey 😊, @hackerwhite7957! Check out this solution: stackoverflow.com/a/73493268

[@aborayan]

and label text color and size how can change it ?

[@HeyFlutter]

Thank You أبو ريان - Abo Rayan - تعلم اللغة الاسبانية مع! Follow this link: stackoverflow.com/questions/71049836/label-text-color-is-not-changing-in-bottom-navigation-bar-widget-in-scaffold-fl I hope you will get your answer 🙂

[@OICG]

Where is material you ?

[@OICG]

Got it in your pinned comment 👍

[@ahmed_alharthi]

​@@HeyFlutter Thanks, when it is going to be stable?

[@src.obaida]

does it works also with google Nav bar ?

[@HeyFlutter]

Yes, @src.obaida 🙂

[@ilyadreamix]

how to make system navbar with app navbar container color? i don't want it to be just black

[@HeyFlutter]

Thank You IlyaDreamix! Follow this link: stackoverflow.com/questions/51012360/flutter-system-navigation-bar-and-status-bar-color I hope you will get your answer 🙂

[@syedhannan546]

Hi can i call api for all the 4 tabs at once itself even before clicking on the tabs? since it will make the user wait for loading data

[@HeyFlutter]

Thank You Syed Abdul Hannan! Follow this link: stackoverflow.com/questions/67959307/how-to-passing-data-api-with-bottom-navigation-bar-on-flutter I hope you will get your answer 🙂

[@syedhannan546]

@@HeyFlutter thanks for the reply😊

[@abdallahhossam2175]

when i try to change the color of label by writing label:Text("mail",style: TextStyle(color:Colors.red)), it tells me that A value of type 'Text' can't be assigned to a parameter of type 'String'

[@ugwutakingsley1671]

Were you able find a way out with this? I am currently facing this and would appreciate if you can share a solution

[@abdulmalikmuhammad6981]

hey Johannes, How can I keep the navigation bar when I navigate from mail page to another page

[@abdulmalikmuhammad6981]

@@HeyFlutter Thanks, mate! you just made to buy your course.

[@rangasamyeswaran8440]

hi Johannes Milke. In column I was given lot of information by ListView it's scrollable but the issue is when i am going to take a screenshot that screenshot is not scrollable. Do you have any idea about that

[@rangasamyeswaran8440]

@@HeyFlutter in android mobile we can take long screenshot. Which means one long page we can take in one screenshot. That's why I am asking. In android 10 itself that option will available.

[@abdoudouba2889]

Navigation Bar it doesn't work for flutter : 2.5.1

[@BB-fg9ed]

Day_2 of asking for a simple everyday reminder with local push notification. And also saving the reminder even if app closes

[@md.ruhulamin7963]

Sir, please improve the video quality, it show only 360p available.

[@md.ruhulamin7963]

😀😀 ok sir, its a long time that my morning starts by seeing your videos. You are so great full.

[@barronsa1317]

How can we dm you man

[@Baiai2899]

I can't move pages, help me

[@HeyFlutter]

Thank You @mohamadalmubarok9928! Follow this link: developer.school/snippets/flutter/material-you-navigation-bar I hope you will get your answer 🙂

[@Baiai2899]

@@HeyFlutter Thank you this works after using flutter channel master

[@OM-nx4pp]

you request web is not working

[@HeyFlutter]

Thank you, OM! 🙂. Try to paste the error message with your question whenever you face any issue or error.

[@nix_malone]

We must give our email address so that you can annoy us with adds because you can't just email us the source code.

[@HeyFlutter]

Thanks, NiXØ! 🙂 Learn more about it here: github.com/JohannesMilke/sponsorware#2-why-didnt-i-get-an-email-even-if-i-have-sent-already-a-request-on-your-website

[@MegaOsama99]

I love you ❤ u r superman 👍

[@HeyFlutter]

Thanks, @MegaOsama99! 🙂

[@mrsp7693]

Hello 👋 your videos very successful Brother. Brother one help flutter App in Text input Google form links show link in app & click link show Google form in App . Please one video make please please

[@elnacho5648]

Bad Video. Its not funtionallity!!!! dont waste your time and watch a diffrent video!!!

[@HeyFlutter]

Thank you, @elnacho5648! 🙂. We are sorry for that, but we always learn and try to improve ourselves, your kind suggestion will help in that regard. Let us know what should we improve in our videos? Your suggestion will be highly appreciated.

[@raghav042]

This is not material you