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

Подписаться 200 тыс.

Просмотров 74 тыс.

50% 1

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: ru-vid.com...
👉 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

Наука

Опубликовано:

3 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 127

@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 2 года назад

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 2 года назад

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

@phonghuynh3551 2 года назад

Always clearly and simple to understanding! 💙

@khanisrarahmedalihusain 2 года назад

Awesome as always 😊. Thanks for making such nice tutorial

@Apenschi 2 года назад

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!

@osamamicro1103 2 года назад

So amazing and clear content, Keep it up!

@frankeealcaayamanansin186 2 года назад

WOW! I would gladly try this out!

@hawarhekmat1174 2 года назад

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

@mohammadshahid9820 2 года назад

Good content as always bro. Thanks

@isheriff82 2 года назад

amazing, so much easier to understand ur lessons!

@Hitogiri 2 года назад

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

@physicslakmal3754 2 года назад

Great Work. Thank you very much!

@obeddougan1505 2 года назад

Thank for this tutorial

@liqiye368 2 года назад

Thanks a lot man you saved my day.

@2mvX 2 года назад

thanks for this tutorial!

@thushankalana4940 2 месяца назад

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

@HeyFlutter 2 месяца назад

You are welcome, @thushankalana4940 😊

@luisayestaran175 2 года назад

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!

@wadalamen14 2 года назад

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

@Pedro5antos_ 2 года назад

Thanks (again)!!

@abhishekagarwal6750 2 года назад

best navigation bar tutorial on the net!

@abhishekagarwal6750 2 года назад

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

@md.ruhulamin7963 2 года назад

Thank you sir.

@srunrathaes128 Год назад

Love your teaching

@HeyFlutter Год назад

Glad you liked it, @srunrathaes128 😀

@prayandcode 2 года назад

Nice one bro

@mdshahidali3132 2 года назад

Awesome Sir.Please Make more Video of design

@AnyThink5 10 месяцев назад

very useful video ❤

@HeyFlutter 10 месяцев назад

Glad you liked it, @AnyThink5 😀

@zanovis Год назад

Your videos rock!

@HeyFlutter Год назад

Glad you liked it, @zanovis 😀

@mojtabasaebi6096 2 года назад

Thank you LOve you

@sorunkehassan4531 2 года назад

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

@ranjanadeore2957 2 года назад

Everything is temporary morning with your video is permanent

@DguruZ 2 года назад

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

@rog0079 2 года назад

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

@rog0079 2 года назад

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

@aytunch 2 года назад

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

@yumyumviral1190 Год назад

Thank you

@HeyFlutter Год назад

You are welcome, YumYum Viral!

@alihussainabro7694 2 года назад

johannes Milke Thanks

@HeyFlutter 2 года назад

Thanks, also Ali Hussain Abro! 🙂

@LuminousAsianBeauties 2 года назад

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

@theartoflife8008 Год назад

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

@HeyFlutter Год назад

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

@stellarrelax.3495 2 года назад

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.

@dandusaivarma2416 2 года назад

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

@user-vq7du3in2x 2 года назад

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

@tranthanhtra1312 8 месяцев назад

ohh thank you

@HeyFlutter 8 месяцев назад

You are welcome, @tranthanhtra1312 😊

@oluchukwuanthonia3343 2 года назад

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

@crazycat6569 2 месяца назад

Thank you. Please, can you provide information on how you handle Back button with this navigation bar ?

@HeyFlutter 2 месяца назад

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 🙂

@crazycat6569 2 месяца назад

@@HeyFlutter Thank you. So there is no way to do it without PopScope. 😭

@obeddougan1505 2 года назад

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

@dimasismu5738 2 года назад

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

@mdshahidali3132 2 года назад

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

@aborayan 2 года назад

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

@HeyFlutter 2 года назад

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 2 года назад

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

@rajenderkatkuri7642 2 года назад

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

@Er.MeetPatel 2 года назад

How Jump Between Pages Programmatically In Navigation Bar

@gangasunny1908 2 года назад

Does this feature support in android 11 phones???

@tripsam4655 2 года назад

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

@tripsam4655 2 года назад

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

@rohaitastanoli3414 2 года назад

How to change icon color?

@vandanaverma1399 2 года назад

how to change selected text color in navigator-bar

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

@sousanonymoi 2 года назад

how to remove the blue colors from the selected icon?

@evanhossain1618 2 года назад

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

@evansgitonga3046 2 года назад

what about persistent navigation bar

@rashidkhan1845 2 года назад

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

@user-bx8uh4gl6s 2 года назад

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?

@learnwithsajjat 2 года назад

How much money your all course in 1 year

@rangasamyeswaran8440 2 года назад

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 2 года назад

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

@MarkyMarking 2 года назад

Is it persistent?

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

@abdulmalikmuhammad6981 2 года назад

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

@abdulmalikmuhammad6981 2 года назад

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

@src.obaida Год назад

does it works also with google Nav bar ?

@HeyFlutter Год назад

Yes, @src.obaida 🙂

@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

@rakibulhasanjoy7158 2 месяца назад

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

@HeyFlutter 2 месяца назад

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

@ilyadreamix 2 года назад

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

@HeyFlutter 2 года назад

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 🙂

@aborayan 2 года назад

and label text color and size how can change it ?

@HeyFlutter 2 года назад

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 🙂

@BB-fg9ed 2 года назад

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

@abdallahhossam2175 2 года назад

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 6 месяцев назад

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

@darkhorrormystery7000 8 месяцев назад

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 8 месяцев назад

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

@hackerwhite7957 11 месяцев назад

and what how we do style for unselected lable

@HeyFlutter 11 месяцев назад

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

@barronsa1317 2 года назад

How can we dm you man

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

@abdoudouba2889 2 года назад

Navigation Bar it doesn't work for flutter : 2.5.1

@md.ruhulamin7963 2 года назад

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

@md.ruhulamin7963 2 года назад

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

@Baiai2899 10 месяцев назад

I can't move pages, help me

@HeyFlutter 10 месяцев назад

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

@Baiai2899 10 месяцев назад

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

@MegaOsama99 Год назад

I love you ❤ u r superman 👍

@HeyFlutter Год назад

Thanks, @MegaOsama99! 🙂

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

@OICG 2 года назад

Where is material you ?

@OICG 2 года назад

Got it in your pinned comment 👍

@ahmed_alharthi 2 года назад

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

@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

@mrsp7693 2 года назад

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 4 месяца назад

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

@HeyFlutter 4 месяца назад

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.