Flutter - Custom Shaped Bottom Navigation Bar (From Scratch) | Flutter UI Design Tutorial
HTML-код
- Опубликовано: 7 сен 2024
- #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/ret...
🔥 Auto-Generate Flutter Custom Paint Code TRY THIS FREE TOOL👇:
👉 Flutter Shape Maker: fluttershapema...
🔥 Learn About the MOST IMPORTANT WIDGETS in Flutter 👇:
👉 Widget Essentials Series: bit.ly/3GpfiYw
👉🏻 Product Hunt: www.producthun...
(Your UPVOTE Means a lot! 🙌)
If you find this video useful consider Supporting @RetroPortal Studio :
👉 Buy Me a Coffee: www.buymeacoff...
👉 Patreon: / retroportalstudio
Social Links @RetroPortal Studio :
👉 Twitter: / theretroportal
👉 Medium: / retroportalstudio
👉 Instagram: / retroportalstudio
👉 GitHub: github.com/ret...
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 :)
![Megan Thee Stallion - Neva Play (feat. RM) [Official Video]](http://i.ytimg.com/vi/TpYTyAaTRts/mqdefault.jpg)
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! ✌️😁
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!
@Waylon Bradley instablaster :)
@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.
@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
@Waylon Bradley you are welcome :D
While others are busy explaining what is Flutter and its benefits, you are literally cooking dishes in Flutter kitchen.
😅👏👏👏 ❤😊 loving your approach.
💙 Loved your Response ✌😁... Check this out .. ruclips.net/video/AnKgtKxRLX4/видео.html you're gonna love this!
Very deep explanation thank you so much 🙏🏼🙏🏼🙏🏼
Great leadership. I did not expect that everything is so harmonious and relatively easy to implement. Thanks for the great example.
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!
year 2022 and you're creation is still awesome, keep coming Boss 👍
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
WOW man you are so much better than half of youtube flutter commiunity .
Thank you very much for your educational sharing. I wish you and your loved ones health and happiness.
Very well done!!!!!!!! Thank you Retro! Very positive community here
subscribed. good job sir. well explained. thank you
Thanks for sharing ❤️💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕
Thanks a ton for your fantastic explanation!! Please do more videos on custom painter and the math behind it. Subscribed!!!
nice man. really nice explanation.
Thanks for providing us the best flutter tutorials constantly !
“By using this simple tips and tricks...” Thank you for the motivation
This will help you out ruclips.net/video/AnKgtKxRLX4/видео.html ✌😁
Wow hats off - this is really well explain- thanks for this tutorial - first time I can see how it works ❤😊
Great dear. You are the best
Thanks. Easy to follow and understand the concept. Awesome work.
Thank you!
I hope that you keep producing these awesome videos!
Feeling greateful to reach upto here, A lot of Love from Nepal
thank you so much ....you explained every detail for us in every video.
Nice u explanation are dope
This may look easy but in real ...... Awesome video Thanks
You deserve more subscribers man! Nice video as usual GG! Keep up the good works!
Great explanation... As beginner your tutorial impressed me...
Great man, keep going. you've a simple and powerful explanation all my support to you
Very well explained, great work, bruh👍👍👍
incredible explanation, thanks for your videos!! :D
You are genius
King of Flutter
Outstanding video - thanks for taking the time to post. You've got a new subscriber :).
Very useful and instructive 👏👏 Thank you !
Greate video brother, really like your videos.
Thanks mate! Glad you like them ✌
This is awesome and so easy to do. Thank you.
You're amazing dude. Seriously - and also a great explainer! Thanks mate!
wow, great !!
Absolutely loved the content. Thank you!
Thank you it is an awesome tutorial ! I love your videos ❤
Me at first
This guys using android feel sus
After the formula explained
Holy shit best explanation EVER
You're the best.
Now I understand this shapes and paint
one question, how do you take care of active class?
Great tutorial, big fan from Kenya. Consider making the bottom bar responsive on landscape mode, It distorts on orientation change.
good job man
This is so cool. Very good tutorial.
Quality content! Subscribed.
That was fantastic !!
@RetroPortalStudio Excellent video! How do you assign different pages/screen to each button (while keep the buttonNavigationBar)? Thanks
did you find an answer to your question?
Thanks a lot
this is so cool. thanks a lot man
Do you have a complete flutter tutorial anywhere? I just like the way you teach and the loud and clear voice.
That is amazing good. Thank you so much.
Great tutorial!!!!!
awesome
amazing logic!
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?
Useful, thanks dude :)
Good concept. Keep up
Another masterpiece 👍.
Thanks a lot mate
Awesome!
Amazing 😍
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%. 😅
Ah! My Bad! 😅 I did't realize it while recording. Updated in the Pinned Comment Mate! Thank you for noticing
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?
amazing
thanks a lot it was really usefull
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
how are you calculating the curves id really love to learn about that approach and is there anything that can help.
Bravo!!!
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 ?
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!
it might be because of size variable
ok you are the best
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.
very nice
Nice tutorial, the problem with this approach is you can't keep the custom navigation bar on screen when you navigate to other pages.
You make it a widget that can be added to all your pages.
@@Im_Solo57 how
👏
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?
Cool😯
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?
Nice....
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!
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?
Did you find a solution for that issue @hesam
Where were you 2 weeks ago ? Now I need to rewrite code man. Thank you though :)
Sir how can create label below on Icon in bottom bar, please help me thank you
Why is it not possible to have the shape be given by an svg? It seems rather laborious to draw everything by hand
great thanks for the video how can i implement this to BottomNavigationView on Android/Java. Should i use custom class which inherited from bottomnavigationview
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?
same problem, did you find the solution
What did you use for drawing the bezier curve as in the diagram
thx a lot man but is there any idea to make the icon splash color visible ?
Cool. But don’t you need to use the scaffold bottom nav property and pass on your custom widget?
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
if someone presses the other buttons and it navigates to another screen.. the bottom bar will disappear right? how to make it stick ?
hey we cant add movment to the icons after we select them like that curved bottom navigation? how
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?
How do you place the emulator on top but still able to edit the code in the background? Is it done during video editing?
Set "Always On Top" in Emulator Settings ✌
@@RetroPortalStudio super dude! Thanks a lot👍
I'm a beginner guide me Where to paste my other content?
Can u plz tell me how to do it in java ?
It is completely possible but It would be much too hard to implement there mate. I strongly insist you to try flutter alongside 😁
@@RetroPortalStudio thank you 👍
Why not sharing the open-source code of the video?
It's superb, But is it responsive ? ? ?
Use double.infinity for width of the container instead of size.width, then the container will take all the available space.
@@pegasis3646 But he's using percentages of width, so a percentage of infinity wouldn't work
can i add name for each icon?
you should create custom navigation bar item.
Kotlin????