Flutter - Custom Shaped Bottom Navigation Bar (From Scratch) | Flutter UI Design Tutorial

#flutter #ui #mobileapp
In this Flutter UI Design Tutorial, we will be taking a look at creating Custom Shaped Bottom Navigation Bar using Custom Paint Widget from Scratch with Minimal Lines Possible. The main Focus of this video would be to teach you the best approach for creating shapes and aligning elements with ease.
Note: In this video when I say something like 0.35 "Percent" , It is actually 35%. 😅.Realized it after Uploading.
Curves (Flutter): / paths-in-flutter-a-vis...
Github: github.com/retroportalstudio/...
🔥 Auto-Generate Flutter Custom Paint Code TRY THIS FREE TOOL👇:
👉 Flutter Shape Maker: fluttershapemaker.com
🔥 Learn About the MOST IMPORTANT WIDGETS in Flutter 👇:
👉 Widget Essentials Series: bit.ly/3GpfiYw
👉🏻 Product Hunt: www.producthunt.com/posts/flu...
(Your UPVOTE Means a lot! 🙌)
If you find this video useful consider Supporting @RetroPortal Studio :
👉 Buy Me a Coffee: www.buymeacoffee.com/theretro...
👉 Patreon: / retroportalstudio
Social Links @RetroPortal Studio :
👉 Twitter: / theretroportal
👉 Medium: / retroportalstudio
👉 Instagram: / retroportalstudio
👉 GitHub: github.com/retroportalstudio
If you like the tutorial, please hit the LIKE and Subscribe button and also consider supporting me on Patreon or Buy Me a Coffee for More Flutter Tutorial on RetroPortal Studio.
Thank you for Watching! Happy Coding :)

[@RetroPortalStudio]

Note: In this video when i say something like 0.35 "Percent" , It is actually 35%. 😅.Realized it after Uploading. If you find this video useful, consider Following me on: Twitter: twitter.com/theretroportal Instagram: instagram.com/retroportalstudio LinkedIn: www.linkedin.com/in/parasjainrps Happy Coding! ✌️😁

[@waylonbradley1345]

You all prolly dont give a damn but does any of you know a method to get back into an Instagram account? I was stupid forgot the account password. I love any tips you can give me!

[@cademoses857]

@Waylon Bradley instablaster :)

[@waylonbradley1345]

@Cade Moses i really appreciate your reply. I got to the site on google and im waiting for the hacking stuff atm. Seems to take a while so I will reply here later with my results.

[@waylonbradley1345]

@Cade Moses it did the trick and I finally got access to my account again. Im so happy:D Thanks so much, you saved my account :D

[@cademoses857]

@Waylon Bradley you are welcome :D

[@ruchirrai]

While others are busy explaining what is Flutter and its benefits, you are literally cooking dishes in Flutter kitchen. 😅👏👏👏 ❤😊 loving your approach.

[@RetroPortalStudio]

💙 Loved your Response ✌😁... Check this out .. kzbin.info/www/bejne/d5-umKeBrbd_jpY you're gonna love this!

[@mercysparks1403]

Thanks for providing us the best flutter tutorials constantly !

[@lakshminarayanans1066]

Absolutely loved the content. Thank you!

[@leithhobson]

Thank you! I hope that you keep producing these awesome videos!

[@prajwalc5595]

Thanks a ton for your fantastic explanation!! Please do more videos on custom painter and the math behind it. Subscribed!!!

[@inwm07gmailcom]

Great leadership. I did not expect that everything is so harmonious and relatively easy to implement. Thanks for the great example.

[@KhatwangaSivaKiranSeesala]

This is awesome and so easy to do. Thank you.

[@Mark-mo4bo]

You're amazing dude. Seriously - and also a great explainer! Thanks mate!

[@tsioryfitiavanaanhykrishna6992]

You deserve more subscribers man! Nice video as usual GG! Keep up the good works!

[@FlutterMapp]

Very well done!!!!!!!! Thank you Retro! Very positive community here

[@gmiak_dv]

Very useful and instructive 👏👏 Thank you !

[@ricksondpenha]

This is the best video I've seen about flutter recently... You got a subscriber... Keep posting videos like this.. loved how you explained them!

[@farouklilou4527]

Great man, keep going. you've a simple and powerful explanation all my support to you

[@emelinepal]

Thank you it is an awesome tutorial ! I love your videos ❤

[@parsagh2192]

That was fantastic !!

[@Endersontutoriales]

incredible explanation, thanks for your videos!! :D

[@ImpresifMediaDev]

Thanks. Easy to follow and understand the concept. Awesome work.

[@akhilprazapati6148]

Feeling greateful to reach upto here, A lot of Love from Nepal

[@sawkhinmaungthoo5063]

thank you so much ....you explained every detail for us in every video.

[@adttwo]

Outstanding video - thanks for taking the time to post. You've got a new subscriber :).

[@xuantung8660]

This is so cool. Very good tutorial.

[@pulkitprajapat7862]

this is so cool. thanks a lot man

[@POPOEVER]

Very well explained, great work, bruh👍👍👍

[@christophersantos4833]

Quality content! Subscribed.

[@vatan2578]

Thank you very much for your educational sharing. I wish you and your loved ones health and happiness.

[@rohitkumar-ku4ki]

nice man. really nice explanation.

[@go-hi-speed]

year 2022 and you're creation is still awesome, keep coming Boss 👍

[@rafales1525]

Wow hats off - this is really well explain- thanks for this tutorial - first time I can see how it works ❤😊

[@minigeek]

finally, someone who speaks in speed code and explains... great work! don't know why I used to use clipath for such shapes..paint looks much better

[@someshsahu4638]

Very deep explanation thank you so much 🙏🏼🙏🏼🙏🏼

[@Khaleel_Jageer]

Great explanation... As beginner your tutorial impressed me...

[@excellencemichel4875]

That is amazing good. Thank you so much.

[@alexpeiretti7486]

Useful, thanks dude :)

[@DarkHeros09]

Another masterpiece 👍.

[@lalanaibova9284]

wow, great !!

[@NISARAHMED-is2di]

Great dear. You are the best

[@mohsinmaliky6614]

subscribed. good job sir. well explained. thank you

[@rezahosseinypour6669]

WOW man you are so much better than half of youtube flutter commiunity .

[@user-pz6tc5mo5l]

Great tutorial!!!!!

[@user-hf7fw2eg8r]

good job man

[@alitonoliveira1700]

Awesome!

[@rafi_45]

Good concept. Keep up

[@cavalinhopocoto]

Amazing 😍

[@ibensalcie]

Great tutorial, big fan from Kenya. Consider making the bottom bar responsive on landscape mode, It distorts on orientation change.

[@adityasapra821]

amazing logic!

[@palaksdarji]

Excellent tutorial. I want to ask, Could u plz make a tutorial on making the button click with ripple effect which respects those curved boundaries?

[@kymzTech]

Nice u explanation are dope

[@konfinoyair]

King of Flutter

[@Ksl.23]

Thanks a lot mate

[@knpddu]

Do you have a complete flutter tutorial anywhere? I just like the way you teach and the loud and clear voice.

[@S-Lomar]

Thanks for sharing ❤️💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕

[@vandeljasonstrypper6734]

Me at first This guys using android feel sus After the formula explained Holy shit best explanation EVER

[@connelasikong8069]

You're the best. Now I understand this shapes and paint one question, how do you take care of active class?

[@paanoop]

This may look easy but in real ...... Awesome video Thanks

[@TheFlutterWay]

Greate video brother, really like your videos.

[@RetroPortalStudio]

Thanks mate! Glad you like them ✌

[@user-ls4ep9ys2b]

Thanks a lot

[@Berke-Khan]

amazing

[@jamilurrehmanamini4878]

You are genius

[@PrabowoMurti]

“By using this simple tips and tricks...” Thank you for the motivation

[@RetroPortalStudio]

This will help you out kzbin.info/www/bejne/d5-umKeBrbd_jpY ✌😁

[@BDCCN-NguyenKiemTan]

awesome

[@calebmoses5453]

thanks a lot it was really usefull

[@liontudellc9508]

I loved the video, thank you!!!... one question... in case we add the Safearea, how do you manage the height to cover the extra space at the bottom?

[@jatin1098]

Hey man Thanks a lot for this video really gained something from it I have worked on simple ui and now wanted to learn more complex UI's and Animations, so can you make a series on any of or both of these or atleast provide me with a resource for same Thanks again

[@user-sq5xv6dr1v]

Bravo!!!

[@BrYarDJ]

very nice

[@marcodecarolis9052]

ok you are the best

[@manavgoyal631]

Cool😯

[@luisfelipevillamizartorres7576]

Nice....

[@alvarogonzalezrico9440]

@RetroPortalStudio Excellent video! How do you assign different pages/screen to each button (while keep the buttonNavigationBar)? Thanks

[@rahafaldrwish5209]

did you find an answer to your question?

[@kevindesiremaasa1342]

Hello thumbs up for this great video. One question though, the background rectangle (where the custom shape literally sits) has a color of white. How can i change that to transparent?

[@chrish.7402]

Hey RetroPortal Studio, I'm a huge fan of your videos and kinda new to dart and flutter. I tried to incorporate this example in an existing demo of me, but somehow when I change the bottomNavigationBar on my home/start screen from my existing one to this example, it overrides the list I have as body, but only if I use this example, is there something which overrides my existing body in your example or did I do something wrong in the way I call it? I've been looking for a solution for several hours now :< I would appreciate if you or someone else have any suggestion :) and keep your nice content coming!

[@gauravthakkar802]

What did you use for drawing the bezier curve as in the diagram

[@user-oi4yw5rr2b]

thx a lot man but is there any idea to make the icon splash color visible ?

[@jhonalejandroboterohomez3436]

What a good video, I am from Colombia, I would like to know how we can put this fixed CustomPaint as a BottomNavigationBar that when doing srcool it stays fixed?

[@adilaytan3870]

great thanks for the video how can i implement this to BottomNavigationView on Android/Java. Should i use custom class which inherited from bottomnavigationview

[@nandaletro]

Cool. But don’t you need to use the scaffold bottom nav property and pass on your custom widget?

[@umut12351]

Where were you 2 weeks ago ? Now I need to rewrite code man. Thank you though :)

[@yadjnishnursiah8621]

Suppose I have added a sidebar which i've watched from your previous video, is it possible to add this bottom navigation bar within the same homescreen.dart ? can you help me Sir ?

[@adriencalas764]

👏

[@oxglowinc.1614]

I love this video. However, there is a problem. The customer bottom navigation bar disappears when you click to another page. I was able to implement that functionality in the bottom navigation bar. Is there a way you can help? For the navigation bar to be stick after on other pages.

[@animegod2474]

how are you calculating the curves id really love to learn about that approach and is there anything that can help.

[@geofaniweni9845]

Sir how can create label below on Icon in bottom bar, please help me thank you

[@abhiprayasaputra9426]

It is possible to animate the navigation ? For example when changing page, the selected icon become bigger and the bottom navigation bar sort of move following the selected icon

[@Ematolah]

hey we cant add movment to the icons after we select them like that curved bottom navigation? how

[@prankcial4187]

Thanks for the tutorial.😌😌 I'm just stating here 1 mistake you made while explaining. You always said 0.35 as 0.35% but it is 35%. Since, 35% =35/100 which means, 0.35. So, we should say it as 35% instead of 0.35%. 😅

[@RetroPortalStudio]

Ah! My Bad! 😅 I did't realize it while recording. Updated in the Pinned Comment Mate! Thank you for noticing

[@sucharita6070]

if someone presses the other buttons and it navigates to another screen.. the bottom bar will disappear right? how to make it stick ?

[@andreiasw1]

Why is it not possible to have the shape be given by an svg? It seems rather laborious to draw everything by hand

[@hesamtaleghani3309]

Thanks, It was great, But i have a problem, when I set something like this (a stack navigation bar) as the navigation bar of a scaffold, it will overlap the body of it and i can not see the body of scaffold, anyone knows how to fix it?

[@steeve47]

Did you find a solution for that issue @hesam

[@adilaytan3870]

hi again, i converted all codes to java, but i couldn't convert to this line. path.arcToPoint(Offset(size.width * 0.60, 20), radius: Radius.circular(20.0), clockwise: false); can anyone help me to convert this into java?

[@martinglanz]

Very good example! The only problem I find is that when using onTap() on the FloatingActionButton nothing happens. If I remove the HeightFactor property from the Center it works fine. Why it happens?

[@vooveen]

same problem, did you find the solution

[@DSOnur]

Nice tutorial, the problem with this approach is you can't keep the custom navigation bar on screen when you navigate to other pages.

[@Im_Solo57]

You make it a widget that can be added to all your pages.

[@mochtetr]

@@Im_Solo57 how

[@lightupledbulbs4139]

I'm a beginner guide me Where to paste my other content?

[@pratt4696]

How can I make it stick to all the pages, it's disappearing and when I tried to fit it to other pages, I'm getting infinite pixels error, please provide the solution!

[@nabil.hamawi]

it might be because of size variable

[@madhusudhanr3527]

How do you place the emulator on top but still able to edit the code in the background? Is it done during video editing?

[@RetroPortalStudio]

Set "Always On Top" in Emulator Settings ✌

[@madhusudhanr3527]

@@RetroPortalStudio super dude! Thanks a lot👍

[@MarcellodeSales]

Why not sharing the open-source code of the video?

[@mr.cherrykim9897]

Can u plz tell me how to do it in java ?

[@RetroPortalStudio]

It is completely possible but It would be much too hard to implement there mate. I strongly insist you to try flutter alongside 😁

[@mr.cherrykim9897]

@@RetroPortalStudio thank you 👍

[@isantechnologies3131]

can i add name for each icon?

[@hesamtaleghani3309]

you should create custom navigation bar item.

[@devangtak6894]

It's superb, But is it responsive ? ? ?

[@pegasis3646]

Use double.infinity for width of the container instead of size.width, then the container will take all the available space.

[@flyingwhiteindian]

@@pegasis3646 But he's using percentages of width, so a percentage of infinity wouldn't work

[@SswizZGaymer]

Kotlin????