Flutter Tutorial - NEW Material You Navigation Bar | The New Way | Flutter Navigation Bar
Vložit
- čas přidán 28. 07. 2024
- The new Flutter Material You Navigation Bar is here! Does it replace the aged Flutter Bottom Navigation Bar?
Click here to Subscribe to Johannes Milke: czcams.com/users/JohannesMilke...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/mate...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
0:00 Introduction Material You Navigation Bar
0:21 Create Material You Navigation Bar
0:59 Set Background Color Of Selected Icon
1:16 Change Navigation Bar TextStyle
1:29 Change Navigation Bar Height
1:38 Set Background Color Of Navigation Bar
1:46 "onTap": Switch Between Navigation Bar Items
2:40 Navigate Between Pages In Navigation Bar
3:52 Set Selected Icon In Navigation Bar
4:31 Only Icons: Hide All Labels In Navigation Bar
4:41 Show Label For Selected Navigation Bar Item
4:48 Set Animation Duration In Navigation Bar
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke - Věda a technologie
This might help you :)
👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
Source Code: github.com/JohannesMilke/material_you_navigation_bar
I was looking for this for a while now. It looks lovely! I am excited about the full Material You release.
I was about to sleep but saw this notification. I like Material You design and loved this video 💙
Always clearly and simple to understanding! 💙
Awesome as always 😊. Thanks for making such nice tutorial
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!
Thank you for this, short concise and covers everything necessary. I love it!
Glad you liked it, @SanusiAdewale 😀
So amazing and clear content, Keep it up!
ur the best flutter teacher, thanks for your awesome explanation 🙏
amazing, so much easier to understand ur lessons!
WOW! I would gladly try this out!
Great Work. Thank you very much!
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!
Just wat i was looking for. .. thank you, now i know what am going to do today
Good content as always bro. Thanks
Thank for this tutorial
Thanks a lot man you saved my day.
thanks for this tutorial!
Thanks Johannes, what about material you scroll/list view?
Great video love your contents but if want to push another screen ,still have the bottom navigation and state, how can I do this ?
Very useful video bro! . I just have a question, How can I preserv the state of a Page ?
Thank you sir.
Awesome Sir.Please Make more Video of design
Thanks (again)!!
Dr. Johannes Milke 😁
No words to say...
Hi Milke how do i change the icons size and icons color on selected . In default icons are in black. Thanks in advance
Great lesson❤️❤️❤️ Thank you so much Sir ❤😊
You are welcome, @thushankalana4940 😊
best navigation bar tutorial on the net!
@@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??
Could you make a video on how to let the user change the text size of the hole app in a app settings page
Nice one bro
are U have a tutorials for signup/register in local db and login without firebase, thanks
Love your teaching
Glad you liked it, @srunrathaes128 😀
Great as always! Can you do an animation series like Flutter using Rive/Flare/Lottie animations for beginners? It would be great!
@@HeyFlutter I see you've already created the videos on the same... You're exceptional! Keep up the good work sir! :)
Thank you LOve you
How to change icon color?
thank you so much but how i can add bottom admob ads in app up or down bottom navbar
Thank You أبو ريان - Abo Rayan - تعلم اللغة الاسبانية مع! Follow this link: stackoverflow.com/questions/61544608/ads-overlapping-bottom-navigation-in-flutter
I hope you will get your answer 🙂
how to change selected text color in navigator-bar
Your videos rock!
Glad you liked it, @zanovis 😀
very useful video ❤
Glad you liked it, @AnyThink5 😀
Please can U make video on how to make music player control show on lock screen...
Please
sir i have already a body so where do i put body:screens[index],
Please do a video on how to use photo manager package to make custom image picker
Does this feature support in android 11 phones???
Thank you
You are welcome, YumYum Viral!
yeah. amazing. maybe you can some animation tutorial more💪💪💪
how to remove the blue colors from the selected icon?
"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.
what about persistent navigation bar
can you make a tutorial about notification between mobile to another mobile using firebase by using mobile tokens ?
شكرا لك يا صديقي انت مذهل الله يبارك بك
Glad to hear that, Thank you فن الحياة | The art of life! 😊
Is this new Navigation Bar only for Android or its works for iOS as well ?
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?
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.
Is it persistent?
Thank you. Please, can you provide information on how you handle Back button with this navigation bar ?
Thank You @crazycat6569! Follow this link: stackoverflow.com/questions/70141793/how-to-handle-flutter-bottom-navigation-bar-when-back-button-is-pressed-to-go-to
I hope you will get your answer 🙂
@@HeyFlutter Thank you. So there is no way to do it without PopScope. 😭
How much money your all course in 1 year
and label text color and size how can change it ?
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 🙂
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?
Is there a way to put an empty placeholder item under FAB to adjust bottom navbar spacing between items to include FAB?
@@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?
Sir please create a video on Develop own package and plugin in flutter
How Jump Between Pages Programmatically In Navigation Bar
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
@@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.
how to make system navbar with app navbar container color? i don't want it to be just black
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 🙂
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.
Everything is temporary morning with your video is permanent
johannes Milke Thanks
Thanks, also Ali Hussain Abro! 🙂
hey Johannes,
How can I keep the navigation bar when I navigate from mail page to another page
@@HeyFlutter Thanks, mate! you just made to buy your course.
ohh thank you
You are welcome, @tranthanhtra1312 😊
and what how we do style for unselected lable
Hey 😊, @hackerwhite7957! Check out this solution: stackoverflow.com/a/73493268
is it possible to make navbar disappear on certain page with this method?
Hey, @capybaracode 🙂 this support is provided in material you design, if your app supports material you, you can definitely use it
How can we dm you man
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
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 🙂
@@HeyFlutter thanks for the reply😊
If in profile view, there is a button, and navigate another page, then how can I show bottom navigation bar?
Thank You @rakibulhasanjoy7158! Follow this link: pub.dev/packages/persistent_bottom_nav_bar
I hope you will get your answer 🙂
does it works also with google Nav bar ?
Yes, @src.obaida 🙂
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?
Thanks for the idea @darkhorrormystery7000 😀, i have added it in my list of future videos
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'
Were you able find a way out with this? I am currently facing this and would appreciate if you can share a solution
Can we hide this navigation bar with scroll down?
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 🙂
Navigation Bar it doesn't work for
flutter : 2.5.1
you request web is not working
Thank you, OM! 🙂. Try to paste the error message with your question whenever you face any issue or error.
I can't move pages, help me
Thank You @mohamadalmubarok9928! Follow this link: developer.school/snippets/flutter/material-you-navigation-bar
I hope you will get your answer 🙂
@@HeyFlutter Thank you this works after using flutter channel master
Sir, please improve the video quality, it show only 360p available.
😀😀 ok sir, its a long time that my morning starts by seeing your videos. You are so great full.
Day_2 of asking for a simple everyday reminder with local push notification. And also saving the reminder even if app closes
Where is material you ?
Got it in your pinned comment 👍
@@HeyFlutter Thanks, when it is going to be stable?
We must give our email address so that you can annoy us with adds because you can't just email us the source code.
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
I love you ❤ u r superman 👍
Thanks, @MegaOsama99! 🙂
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
Bad Video. Its not funtionallity!!!! dont waste your time and watch a diffrent video!!!
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.
This is not material you
how can I keep BottomNavigationBar on each page because whenever I navigate to some route the BottomNavigationBar disappears.
Thank You @user-ok3uv1qx2r! Follow this link: pub.dev/packages/persistent_bottom_nav_bar
I hope you will get your answer 🙂