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

  Рет қаралды 69,311

HeyFlutter․com

HeyFlutter․com

Күн бұрын

Пікірлер: 100
@HeyFlutter
@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
@rahz_k 2 жыл бұрын
This is the best flutter video for implementing a navigation bar that i have seen! Thank you so much!!
@sahartalaa9774
@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
@abiezerlopez5359
@abiezerlopez5359 3 жыл бұрын
Thanks for sharing your knowledge Johannes, greatly appreciated.
@dilshansenavirathna4947
@dilshansenavirathna4947 3 жыл бұрын
Thank you very much for sharing your knowledge.much love from Sri Lanka.❤
@Rocky-fire99
@Rocky-fire99 3 жыл бұрын
❤️
@anonymousone4824
@anonymousone4824 3 жыл бұрын
Thank you man you deserve all support 👌
@wadalamen14
@wadalamen14 3 жыл бұрын
Thank you very much for this cool package... 👍
@HandsOnKnowledge
@HandsOnKnowledge 2 жыл бұрын
You are amazing Johannes, thank you for sharing your knowledge.
@HeyFlutter
@HeyFlutter 2 жыл бұрын
You’re most welcome, Monsieur Ali! 🙂
@hirakiran3648
@hirakiran3648 2 жыл бұрын
Your lectures is amazing sir😍
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank you, Hira kiran! 🙂
@Pedro5antos_
@Pedro5antos_ 3 жыл бұрын
Awesome tips about navigation bar! Thanks
@bluman316
@bluman316 3 жыл бұрын
Absolutely love your videos. Keep up the good work Love from India♥♥
@bhabhayt398
@bhabhayt398 2 жыл бұрын
Search data from local database in implement staggered grid view
@KnowledgeWorld-LetsLearn
@KnowledgeWorld-LetsLearn 3 жыл бұрын
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!!
@ahmedsalah5850
@ahmedsalah5850 3 жыл бұрын
You are a great constructor ❤️
@hansraj_316
@hansraj_316 2 жыл бұрын
amazing , very helpful
@abdifitaahshariif5866
@abdifitaahshariif5866 3 жыл бұрын
Thank u so much,keep it up doing this we got alot.
@اميرهصلاح_سعيدزهران
@اميرهصلاح_سعيدزهران 2 жыл бұрын
Thank you so much for this video🥰
@HyperVisions
@HyperVisions 2 жыл бұрын
you are the best man
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Glad to hear that, Thank you Dilamo Wondimu! 😊
@gumdum6764
@gumdum6764 3 жыл бұрын
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!
@carlosjaviersalazarmartine9957
@carlosjaviersalazarmartine9957 2 жыл бұрын
Thank you so much for great video...!!!
@ravronz9677
@ravronz9677 3 жыл бұрын
Thanks so much bro.. i really appreciate ur hard-work and time
@bayanhoms8532
@bayanhoms8532 3 жыл бұрын
So useful! thanks alot
@shorts_cute
@shorts_cute 3 жыл бұрын
Nice work
@djjavvystark5470
@djjavvystark5470 3 жыл бұрын
Thank you so much 👍
@tuanhuynh4657
@tuanhuynh4657 3 жыл бұрын
Thanks for great video. Really helpful an detailt
@r27td48
@r27td48 2 жыл бұрын
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
@HeyFlutter 2 жыл бұрын
Hey, RSC 🙂 This bottom-bar is not persistent. Thanks for suggesting idea, I have added it in list of future videos
@r27td48
@r27td48 2 жыл бұрын
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.
@kickoffprofits
@kickoffprofits 3 жыл бұрын
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
@dicksonguinajnr1449
@dicksonguinajnr1449 3 жыл бұрын
Thank you so much my brother.. 🙏
@mojtabasaebi6096
@mojtabasaebi6096 2 жыл бұрын
nice greate thank you man
@kristijanbarabas9476
@kristijanbarabas9476 2 жыл бұрын
great tutorial as always! thanks alot! :)
@HeyFlutter
@HeyFlutter 2 жыл бұрын
You’re most welcome, Kristijan Barabas! 🙂
@atultiwari7361
@atultiwari7361 3 жыл бұрын
great one, Can you make a video on Api integration using models with complex ui.... Thank You
@akhiefeilong3650
@akhiefeilong3650 2 жыл бұрын
great bro thasnks alot
@HeyFlutter
@HeyFlutter 2 жыл бұрын
You are welcome, Akhie Feilong 😊
@progra7502
@progra7502 2 жыл бұрын
@namanyasiapa9307
@namanyasiapa9307 Жыл бұрын
Keren, sungguh tergejang2
@susangautam2063
@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?
@hanmadrin3282
@hanmadrin3282 3 жыл бұрын
oh..my!! great!
@aurora_vip
@aurora_vip 2 жыл бұрын
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
@HeyFlutter 2 жыл бұрын
Hey, Yahia Antar 🙂 you can give some scroll padding to your listview from bottom
@aurora_vip
@aurora_vip 2 жыл бұрын
​@@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
@aurora_vip 2 жыл бұрын
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.
@eldadario7339
@eldadario7339 3 жыл бұрын
Perfect
@shubhaminavolu1230
@shubhaminavolu1230 3 жыл бұрын
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!
@NoBodyknow172
@NoBodyknow172 2 жыл бұрын
How can I call use flutter bloc for manage current index as well back button on any other screen.
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You yazad dumasia! Follow this link: stackoverflow.com/questions/54643213/flutter-back-navigation-and-bloc-data I hope you will get your answer 🙂
@endlessloopsoftwares4724
@endlessloopsoftwares4724 3 жыл бұрын
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
@endlessloopsoftwares4724 3 жыл бұрын
@@HeyFlutter A huge Thank You once Again ❤️❤️
@qamarabbasi4695
@qamarabbasi4695 2 жыл бұрын
can we make buttonBackgroundColor gradient instead of single color?
@qamarabbasi4695
@qamarabbasi4695 2 жыл бұрын
@@HeyFlutter Please help me how I can do that? As that is expecting a Color not a Widget or Gradient?
@usmanshoaib129
@usmanshoaib129 2 жыл бұрын
how to change the color of only selected icon color? not buttonbackground only icon??
@asitpurohit_108
@asitpurohit_108 2 жыл бұрын
I have a question , can we customize desgin in flutter to any level , or need to learn Java and swift ??
@landrynganji2155
@landrynganji2155 3 жыл бұрын
hello, how can i hide curved navigation bar on certain screen in my app like splash screen or login screen for example.
@fahimmohammed2171
@fahimmohammed2171 2 жыл бұрын
Can we set a gradient color for this bottom bar? If yes, how can we do it
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Hey 😊, Fahim Mohammed! Check out this solution: stackoverflow.com/a/61717710
@fahimmohammed2171
@fahimmohammed2171 2 жыл бұрын
@@HeyFlutter placing a container for gradient is the way but in this case it the gradient color covers the curved animation bar
@Becoder15604
@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
@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 🙂
@ecoman003
@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?
@mohammadal-aqua2160
@mohammadal-aqua2160 2 жыл бұрын
Man u are great
@vinaybakle6443
@vinaybakle6443 3 жыл бұрын
how to make top right and top left corner rounded to curved navigation bar?
@Ravens-World
@Ravens-World 3 жыл бұрын
Is it possible to add a label to each icon?
@dimitrycoulibaly9838
@dimitrycoulibaly9838 3 жыл бұрын
Yes it possible !
@mmokenape4730
@mmokenape4730 3 жыл бұрын
is it possible to change the transition animation from page to page? if so, how?
@hurbangash1302
@hurbangash1302 2 жыл бұрын
hello sir i want only center button to be curve not other how to do it
@swagsonengine
@swagsonengine 2 жыл бұрын
When I set extended body to true, some widgets appear behind the bottom navigation bar. How do I prevent that?
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank you, Denzel Gatugu! 🙂. Change it to false might work for you.
@ashishrana5773
@ashishrana5773 2 жыл бұрын
I have never received any confirmation mail after requesting access.
@user-vq7du3in2x
@user-vq7du3in2x 3 жыл бұрын
How can I make it to the top
@alhamdymohammed7410
@alhamdymohammed7410 Жыл бұрын
Cooool but, When I click, I want to go to another page .. not appear on the same page
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank you, @alhamdymohammed7410! 🙂. Try to provide enough details with your question whenever you face any issue.
@sabahtarter
@sabahtarter 3 жыл бұрын
I got you email but there is no code could you check it again ?
@yunismaruf
@yunismaruf 3 жыл бұрын
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
@yunismaruf 3 жыл бұрын
@@HeyFlutter thanks, How to do that I'm new in mobile app development, Can you suggest me a way or any demo(:
@mudassirahmadkhan4734
@mudassirahmadkhan4734 Жыл бұрын
how i make curved bottom navigation bar persistent
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank You @mudassirahmadkhan4734! Follow this link: pub.dev/packages/persistent_bottom_nav_bar I hope you will get your answer 🙂
@abodisadiq7156
@abodisadiq7156 2 жыл бұрын
Why I become unable to download your codes, engineer?
@HeyFlutter
@HeyFlutter 2 жыл бұрын
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
@abodisadiq7156 2 жыл бұрын
@@HeyFlutter Thank you, I can't do that, sorry. Although, Your videos are very helpful.
@a.7853
@a.7853 3 жыл бұрын
Is the source code free or paid?
@sahil2010
@sahil2010 Жыл бұрын
email sent, subscribed but not email received to get access to source code.
@HeyFlutter
@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
@noorsalam5344 2 жыл бұрын
source code please
@HeyFlutter
@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
@noorsalam5344 2 жыл бұрын
how can i commincate with you i have some question ?
@bobby9568
@bobby9568 3 жыл бұрын
cool, can you make a video showing the wrong way xD?
@Dylan-li5vv
@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
@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.
@nuwandissanayake9008
@nuwandissanayake9008 Жыл бұрын
😍😍😍😍😍😍😍😍😍😍😍😍
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank you, Nuwan Dissanayake! 🙂
@AshfaaqCurimbaccus
@AshfaaqCurimbaccus 2 жыл бұрын
would have been much better if the source code was easily accessible disappointed tho !
@AshfaaqCurimbaccus
@AshfaaqCurimbaccus 2 жыл бұрын
Without having to fill forms etc
Flutter Tutorial - Bottom Navigation Bar | The Right Way | Without Routes
10:26
Top 70 Flutter Tips, Widgets & Packages
16:22
Flutter Mapp
Рет қаралды 130 М.
小路飞和小丑也太帅了#家庭#搞笑 #funny #小丑 #cosplay
00:13
家庭搞笑日记
Рет қаралды 17 МЛН
It’s all not real
00:15
V.A. show / Магика
Рет қаралды 14 МЛН
Cheerleader Transformation That Left Everyone Speechless! #shorts
00:27
Fabiosa Best Lifehacks
Рет қаралды 14 МЛН
Что-что Мурсдей говорит? 💭 #симбочка #симба #мурсдей
00:19
Modern Bottom Nav Bar📱Flutter Tutorial ♡
8:15
Mitch Koko
Рет қаралды 182 М.
Create Stunning Python GUIs in 10 Minutes With Drag & Drop
11:38
Coding Is Fun
Рет қаралды 99 М.
Top 30 Flutter Tips and Tricks
6:50
Flutter Mapp
Рет қаралды 574 М.
How to STUDY so FAST it feels like CHEATING
8:03
The Angry Explainer
Рет қаралды 2,1 МЛН
Israel Has The Right To Defend Itself | Stand-up Comedy by Daniel Fernandes
15:07
小路飞和小丑也太帅了#家庭#搞笑 #funny #小丑 #cosplay
00:13
家庭搞笑日记
Рет қаралды 17 МЛН