No video :(

Flutter Tutorial - Animated Curved Navigation Bar | The Right Way | Bottom Navigation Bar

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

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

50% 1

Create an Animated Curved Bottom Navigation Bar in Flutter. This Curved Navigation Bar works on Android and iOS.
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/curv...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Bottom Navigation Bar Tutorial: • Flutter Tutorial - Bot...
Expand Multiple Floating Action Buttons Tutorial: • Flutter Tutorial - How...
iOS TabBar Tutorial: • Flutter Tutorial - Cre...
Tabbed AppBar Tutorial: • Flutter Tutorial - Cre...
Hide/Show AppBar On Scroll Tutorial: • Flutter Tutorial - Hid...
Hide Bottom On Scroll Tutorial: • Flutter Tutorial - How...
Animated Bottom Navigation Bar Tutorial: • Flutter Tutorial - Ani...
AppBar & Transparent AppBar Tutorial: • Flutter Tutorial - App...
Sliver App Bar Tutorial: • Flutter Tutorial - Sli...
Sticky Headers In ListView Tutorial: • Flutter Tutorial - Sti...
Multi Step Forms Tutorial: • Flutter Tutorial - How...
Amazing Lottie Animations Tutorial: • Flutter Tutorial - Ama...
TIMELINE
0:00 Introduction Curved Navigation Bar
0:11 Create Curved Navigation Bar / Create Animated Bottom Navigation Bar
0:44 Set Initial Item In Curved Navigation Bar
1:06 On Tap In Curved Navigation Bar
1:41 Fix Background Color In Curved Navigation Bar
2:24 Change Background Color & Icon Color In Navigation Bar
3:08 Change Animation Duration In Navigation Bar
3:27 Jump Between Pages Programmatically In Navigation Bar
4:16 Add Navigation Between Pages In Curved Navigation Bar
5:39 Fix iOS Curved Navigation Bar Home Indicator
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

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@HeyFlutter Год назад

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

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

This is the best flutter video for implementing a navigation bar that i have seen! Thank you so much!!

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

Thanks for sharing your knowledge Johannes, greatly appreciated.

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

Thank you man you deserve all support 👌

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

You are Amazingggggg, I haven't received this much information from any video I am also Arabic, I am not good enough in English, but I find your videos easy, interesting, comprehensive, and very useful I've never learned from anyone as you do Thank you sooooooooooooooooo much

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

Awesome tips about navigation bar! Thanks

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

Thank you very much for this cool package... 👍

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

Thank you very much for sharing your knowledge.much love from Sri Lanka.❤

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

❤️

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

You are a great constructor ❤️

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

Thank you so much for this video🥰

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

Thank u so much,keep it up doing this we got alot.

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

So useful! thanks alot

@HandsOnKnowledge Год назад

You are amazing Johannes, thank you for sharing your knowledge.

@HeyFlutter Год назад

You’re most welcome, Monsieur Ali! 🙂

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

Thanks for great video. Really helpful an detailt

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

Thank you. I had fun with this navigation bar and will use it in a future project. If you have a chance to work on Beamer navigation guards, or just beamer in general!

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

Absolutely love your videos. Keep up the good work Love from India♥♥

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

amazing , very helpful

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

Thanks so much bro.. i really appreciate ur hard-work and time

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

Thank you so much for great video...!!!

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

Thank you so much my brother.. 🙏

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

Thank you so much 👍

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

nice greate thank you man

@kristijanbarabas9476 Год назад

great tutorial as always! thanks alot! :)

@HeyFlutter Год назад

You’re most welcome, Kristijan Barabas! 🙂

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

Nice work

@hirakiran3648 Год назад

Your lectures is amazing sir😍

@HeyFlutter Год назад

Thank you, Hira kiran! 🙂

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

oh..my!! great!

@KnowledgeWorld-LetsLearn 2 года назад

Thank you so muchh for this video!! You explained this topic in such a simple way that too in just 6 minutes. Hats off to you Johannes. Hope you channel grows more. Once again thank you!!

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

Perfect

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

Awesome video very helpful! Also, do you know how I can use the PageView widget with this package so that I can swipe between pages while working with the curved navigation bar? Thank you very much and keep up the amazing tutorials!

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

Thanks for the great video. Would you be so kind to point out how to make the curved navigation bar work/display with pages from the drawer navigation? Thank you

@akhiefeilong3650 Год назад

great bro thasnks alot

@HeyFlutter Год назад

You are welcome, Akhie Feilong 😊

@HyperVisions Год назад

you are the best man

@HeyFlutter Год назад

Glad to hear that, Thank you Dilamo Wondimu! 😊

@mohammadal-aqua2160 2 года назад

Man u are great

@namanyasiapa9307 Год назад

Keren, sungguh tergejang2

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

hello, you're giving me great amount of knowledge but I've a question how to implement a drawer in this case with bottom navigation bar?

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

great one, Can you make a video on Api integration using models with complex ui.... Thank You

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

Very good

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

Salve Brasillllll!

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

is it possible to change the transition animation from page to page? if so, how?

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

hello, how can i hide curved navigation bar on certain screen in my app like splash screen or login screen for example.

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

I have a question , can we customize desgin in flutter to any level , or need to learn Java and swift ??

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

Search data from local database in implement staggered grid view

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

Thank You For Such a wonderful Video ❤️❤️ . I want to make such a mock up that you have used in your thumbnail How can I get that

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

@@HeyFlutter A huge Thank You once Again ❤️❤️

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

how to make top right and top left corner rounded to curved navigation bar?

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

how to change the color of only selected icon color? not buttonbackground only icon??

@Becoder15604 Год назад

Dear Sir, Hope you have an excellent start to the day I use the navigation bar as a component and call it in another class the navigation bar is inside the scaffold in the body I pass pages and the other class have also scaffold widget Now when I call the nav component class it only shows a white screen and the rest of the data of the second class is hidden I use the background transparent but it doesn't work Kindly help

@HeyFlutter Год назад

Thank You Be Coder! Follow this link: medium.com/flutter-community/everything-about-the-bottomnavigationbar-in-flutter-e99e5470dddb I hope you will get your answer 🙂

@r27td48 Год назад

Amazing, Is this bar persistent? if you click on one button to go to a page that is not in the bottom tabs, will that navigation bar disappear? if not would be great if you make a video about that curved navigation persistent...

@HeyFlutter Год назад

Hey, RSC 🙂 This bottom-bar is not persistent. Thanks for suggesting idea, I have added it in list of future videos

@r27td48 Год назад

Thank you so much, i really appreciate it, in my opinion this is the most beautiful bottom navigation, to be honest I was frustrated and irritated with flutter for that, i love flutter but sometimes it's seems more verbose than Java haha something so obvious too many people wants to keep it in other pages, seems like if it's possible, it will have to be done several extra codes to a simple functionality. I would be very grateful and happy if you could show us how to do it, I've searched and i only found the solution with other bottom navigations but not with curved bottom navigation. Maybe it's not even flutter's fault, but the one who developed curved bottom navigation and not presenting this solution in a simple way.

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

I have a problem with the backgroung color that's stuck on. it just makes my UI to look a bit weird. Any fix?

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

hello sir i want only center button to be curve not other how to do it

@NoBodyknow172 Год назад

How can I call use flutter bloc for manage current index as well back button on any other screen.

@HeyFlutter Год назад

Thank You yazad dumasia! Follow this link: stackoverflow.com/questions/54643213/flutter-back-navigation-and-bloc-data I hope you will get your answer 🙂

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

How can I make it to the top

@aurora_vip Год назад

Nice Work! but if i have a listView in a page, last item will be covered with the BottomNavigationBar, any idea of how would that be fixed?

@HeyFlutter Год назад

Hey, Yahia Antar 🙂 you can give some scroll padding to your listview from bottom

@aurora_vip Год назад

@@HeyFlutter Thank you for replaying, I am not sure if I understand the scroll padding part correctly, but since I have my listView wrapped in a container, I did the following: padding: const EdgeInsets.only(left: 7,right: 7,bottom: kBottomNavigationBarHeight+150), and it worked like a charm! thank you very much, you are the best 👏👏

@aurora_vip Год назад

so, I accidentally found a better way to solve this problem without having a hardcoded padding, basically, I wrapped my listView in a Container and the container is wrapped in an Expanded. and that did the job.

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

can we make buttonBackgroundColor gradient instead of single color?

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

@@HeyFlutter Please help me how I can do that? As that is expecting a Color not a Widget or Gradient?

@fahimmohammed2171 Год назад

Can we set a gradient color for this bottom bar? If yes, how can we do it

@HeyFlutter Год назад

Hey 😊, Fahim Mohammed! Check out this solution: stackoverflow.com/a/61717710

@fahimmohammed2171 Год назад

@@HeyFlutter placing a container for gradient is the way but in this case it the gradient color covers the curved animation bar

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

I have never received any confirmation mail after requesting access.

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

I got you email but there is no code could you check it again ?

@Ravens-World 2 года назад

Is it possible to add a label to each icon?

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

Yes it possible !

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

When I set extended body to true, some widgets appear behind the bottom navigation bar. How do I prevent that?

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

Thank you, Denzel Gatugu! 🙂. Change it to false might work for you.

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

Cooool but, When I click, I want to go to another page .. not appear on the same page

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

Thank you, @alhamdymohammed7410! 🙂. Try to provide enough details with your question whenever you face any issue.

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

when i navigate to new page the animation does not work perfectly, it show me some lags, my page is contane number of widgets. pless how to solve this lag.

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

@@HeyFlutter thanks, How to do that I'm new in mobile app development, Can you suggest me a way or any demo(:

@a.7853 2 года назад

Is the source code free or paid?

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

how i make curved bottom navigation bar persistent

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

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

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

cool, can you make a video showing the wrong way xD?

@nuwandissanayake9008 Год назад

😍😍😍😍😍😍😍😍😍😍😍😍

@HeyFlutter Год назад

Thank you, Nuwan Dissanayake! 🙂

@abodisadiq7156 Год назад

Why I become unable to download your codes, engineer?

@HeyFlutter Год назад

Thank You Abodi Sadiq!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

@abodisadiq7156 Год назад

@@HeyFlutter Thank you, I can't do that, sorry. Although, Your videos are very helpful.

@sahil2010 Год назад

email sent, subscribed but not email received to get access to source code.

@HeyFlutter Год назад

Thank You @sahil2010!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

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

source code please

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

Thank You Noor Salam!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

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

how can i commincate with you i have some question ?

@Dylan-li5vv 2 года назад

not sure how this is helping anyone i try and put the code in and nothing works and your not explaining what every thing does

@Dylan-li5vv 2 года назад

@@HeyFlutter the function 'CurvedNavigationBar' isn't defined. (Documentation) what does this mean and you dont show everything so i cant just follow it.