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

  Рет қаралды 91,624

RetroPortal Studio

RetroPortal Studio

Күн бұрын

Пікірлер
@RetroPortalStudio
@RetroPortalStudio 4 жыл бұрын
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
@waylonbradley1345 3 жыл бұрын
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
@cademoses857 3 жыл бұрын
@Waylon Bradley instablaster :)
@waylonbradley1345
@waylonbradley1345 3 жыл бұрын
@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
@waylonbradley1345 3 жыл бұрын
@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
@cademoses857 3 жыл бұрын
@Waylon Bradley you are welcome :D
@ruchirrai
@ruchirrai 4 жыл бұрын
While others are busy explaining what is Flutter and its benefits, you are literally cooking dishes in Flutter kitchen. 😅👏👏👏 ❤😊 loving your approach.
@RetroPortalStudio
@RetroPortalStudio 4 жыл бұрын
💙 Loved your Response ✌😁... Check this out .. kzbin.info/www/bejne/d5-umKeBrbd_jpY you're gonna love this!
@inwm07gmailcom
@inwm07gmailcom 4 жыл бұрын
Great leadership. I did not expect that everything is so harmonious and relatively easy to implement. Thanks for the great example.
@ricksondpenha
@ricksondpenha 4 жыл бұрын
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!
@rida_brahim
@rida_brahim 2 ай бұрын
ma man, all i can say is respect, you and another guy called hey flutter are providing valuable stuff, I'm amazed of how good your tutorials are, thank you brother ❤
@someshsahu4638
@someshsahu4638 Жыл бұрын
Very deep explanation thank you so much 🙏🏼🙏🏼🙏🏼
@rezahosseinypour6669
@rezahosseinypour6669 3 жыл бұрын
WOW man you are so much better than half of youtube flutter commiunity .
@minigeek
@minigeek 4 жыл бұрын
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
@FlutterMapp
@FlutterMapp 3 жыл бұрын
Very well done!!!!!!!! Thank you Retro! Very positive community here
@mercysparks1403
@mercysparks1403 4 жыл бұрын
Thanks for providing us the best flutter tutorials constantly !
@go-hi-speed
@go-hi-speed 2 жыл бұрын
year 2022 and you're creation is still awesome, keep coming Boss 👍
@prajwalc5595
@prajwalc5595 4 жыл бұрын
Thanks a ton for your fantastic explanation!! Please do more videos on custom painter and the math behind it. Subscribed!!!
@leithhobson
@leithhobson 4 жыл бұрын
Thank you! I hope that you keep producing these awesome videos!
@akhilprazapati6148
@akhilprazapati6148 4 жыл бұрын
Feeling greateful to reach upto here, A lot of Love from Nepal
@PrabowoMurti
@PrabowoMurti 4 жыл бұрын
“By using this simple tips and tricks...” Thank you for the motivation
@RetroPortalStudio
@RetroPortalStudio 4 жыл бұрын
This will help you out kzbin.info/www/bejne/d5-umKeBrbd_jpY ✌😁
@vatan2578
@vatan2578 4 жыл бұрын
Thank you very much for your educational sharing. I wish you and your loved ones health and happiness.
@ImpresifMediaDev
@ImpresifMediaDev 2 жыл бұрын
Thanks. Easy to follow and understand the concept. Awesome work.
@tsioryfitiavanaanhykrishna6992
@tsioryfitiavanaanhykrishna6992 4 жыл бұрын
You deserve more subscribers man! Nice video as usual GG! Keep up the good works!
@rafales1525
@rafales1525 4 жыл бұрын
Wow hats off - this is really well explain- thanks for this tutorial - first time I can see how it works ❤😊
@mohsinmaliky6614
@mohsinmaliky6614 2 жыл бұрын
subscribed. good job sir. well explained. thank you
@TheFlutterWay
@TheFlutterWay 4 жыл бұрын
Greate video brother, really like your videos.
@RetroPortalStudio
@RetroPortalStudio 4 жыл бұрын
Thanks mate! Glad you like them ✌
@farouklilou4527
@farouklilou4527 4 жыл бұрын
Great man, keep going. you've a simple and powerful explanation all my support to you
@paanoop
@paanoop 3 жыл бұрын
This may look easy but in real ...... Awesome video Thanks
@rohitkumar-ku4ki
@rohitkumar-ku4ki Жыл бұрын
nice man. really nice explanation.
@sawkhinmaungthoo5063
@sawkhinmaungthoo5063 4 жыл бұрын
thank you so much ....you explained every detail for us in every video.
@Khaleel_Jageer
@Khaleel_Jageer 4 жыл бұрын
Great explanation... As beginner your tutorial impressed me...
@NISARAHMED-is2di
@NISARAHMED-is2di 2 жыл бұрын
Great dear. You are the best
@KhatwangaSivaKiranSeesala
@KhatwangaSivaKiranSeesala 4 жыл бұрын
This is awesome and so easy to do. Thank you.
@xuantung8660
@xuantung8660 4 жыл бұрын
This is so cool. Very good tutorial.
@parsagh2192
@parsagh2192 2 жыл бұрын
That was fantastic !!
@lakshminarayanans1066
@lakshminarayanans1066 4 жыл бұрын
Absolutely loved the content. Thank you!
@Endersontutoriales
@Endersontutoriales 4 жыл бұрын
incredible explanation, thanks for your videos!! :D
@adttwo
@adttwo 3 жыл бұрын
Outstanding video - thanks for taking the time to post. You've got a new subscriber :).
@Mark-mo4bo
@Mark-mo4bo 3 жыл бұрын
You're amazing dude. Seriously - and also a great explainer! Thanks mate!
@POPOEVER
@POPOEVER 4 жыл бұрын
Very well explained, great work, bruh👍👍👍
@connelasikong8069
@connelasikong8069 3 жыл бұрын
You're the best. Now I understand this shapes and paint one question, how do you take care of active class?
@gmiak_dv
@gmiak_dv 3 жыл бұрын
Very useful and instructive 👏👏 Thank you !
@emelinepal
@emelinepal 3 жыл бұрын
Thank you it is an awesome tutorial ! I love your videos ❤
@christophersantos4833
@christophersantos4833 4 жыл бұрын
Quality content! Subscribed.
@pulkitprajapat7862
@pulkitprajapat7862 4 жыл бұрын
this is so cool. thanks a lot man
@konfinoyair
@konfinoyair 4 жыл бұрын
King of Flutter
@kymzTech
@kymzTech 4 жыл бұрын
Nice u explanation are dope
@vandeljasonstrypper6734
@vandeljasonstrypper6734 2 жыл бұрын
Me at first This guys using android feel sus After the formula explained Holy shit best explanation EVER
@ibensalcie
@ibensalcie 4 жыл бұрын
Great tutorial, big fan from Kenya. Consider making the bottom bar responsive on landscape mode, It distorts on orientation change.
@satoshi-f2i
@satoshi-f2i 3 жыл бұрын
Great tutorial!!!!!
@alexpeiretti7486
@alexpeiretti7486 4 жыл бұрын
Useful, thanks dude :)
@excellencemichel4875
@excellencemichel4875 4 жыл бұрын
That is amazing good. Thank you so much.
@jamilurrehmanamini4878
@jamilurrehmanamini4878 3 жыл бұрын
You are genius
@alvarogonzalezrico9440
@alvarogonzalezrico9440 3 жыл бұрын
@RetroPortalStudio Excellent video! How do you assign different pages/screen to each button (while keep the buttonNavigationBar)? Thanks
@rahafaldrwish5209
@rahafaldrwish5209 2 жыл бұрын
did you find an answer to your question?
@S-Lomar
@S-Lomar Жыл бұрын
Thanks for sharing ❤️💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕
@rafi_45
@rafi_45 4 жыл бұрын
Good concept. Keep up
@adityasapra821
@adityasapra821 3 жыл бұрын
amazing logic!
@MohammedNaji-l2k
@MohammedNaji-l2k 2 жыл бұрын
good job man
@DarkHeros09
@DarkHeros09 4 жыл бұрын
Another masterpiece 👍.
@knpddu
@knpddu 3 жыл бұрын
Do you have a complete flutter tutorial anywhere? I just like the way you teach and the loud and clear voice.
@cavalinhopocoto
@cavalinhopocoto 3 жыл бұрын
Amazing 😍
@palaksdarji
@palaksdarji 4 жыл бұрын
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?
@lalanaibova9284
@lalanaibova9284 2 жыл бұрын
wow, great !!
@Ksl.23
@Ksl.23 4 жыл бұрын
Thanks a lot mate
@animegod2474
@animegod2474 9 ай бұрын
how are you calculating the curves id really love to learn about that approach and is there anything that can help.
@alitonoliveira1700
@alitonoliveira1700 4 жыл бұрын
Awesome!
@calebmoses5453
@calebmoses5453 3 жыл бұрын
thanks a lot it was really usefull
@yadjnishnursiah8621
@yadjnishnursiah8621 4 жыл бұрын
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 ?
@oxglowinc.1614
@oxglowinc.1614 3 жыл бұрын
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.
@liontudellc9508
@liontudellc9508 2 жыл бұрын
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?
@MuhammadAliMTR
@MuhammadAliMTR 3 ай бұрын
You have a good English accent
@علاءالدينعباسي-ب6ث
@علاءالدينعباسي-ب6ث 2 жыл бұрын
Thanks a lot
@pratt4696
@pratt4696 3 жыл бұрын
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
@nabil.hamawi 3 жыл бұрын
it might be because of size variable
@jatin1098
@jatin1098 4 жыл бұрын
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
@kevindesiremaasa1342
@kevindesiremaasa1342 2 жыл бұрын
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?
@jhonalejandroboterohomez3436
@jhonalejandroboterohomez3436 3 жыл бұрын
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?
@BDCCN-NguyenKiemTan
@BDCCN-NguyenKiemTan 3 жыл бұрын
awesome
@BrYarDJ
@BrYarDJ 4 жыл бұрын
very nice
@geofaniweni9845
@geofaniweni9845 Жыл бұрын
Sir how can create label below on Icon in bottom bar, please help me thank you
@abhiprayasaputra9426
@abhiprayasaputra9426 2 жыл бұрын
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
@adilaytan3870
@adilaytan3870 4 жыл бұрын
great thanks for the video how can i implement this to BottomNavigationView on Android/Java. Should i use custom class which inherited from bottomnavigationview
@Berke-Khan
@Berke-Khan 3 жыл бұрын
amazing
@0_0-o7y9r
@0_0-o7y9r 3 жыл бұрын
thx a lot man but is there any idea to make the icon splash color visible ?
@gauravthakkar802
@gauravthakkar802 4 жыл бұрын
What did you use for drawing the bezier curve as in the diagram
@andreiasw1
@andreiasw1 2 жыл бұрын
Why is it not possible to have the shape be given by an svg? It seems rather laborious to draw everything by hand
@marcodecarolis9052
@marcodecarolis9052 4 жыл бұрын
ok you are the best
@prankcial4187
@prankcial4187 4 жыл бұрын
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
@RetroPortalStudio 4 жыл бұрын
Ah! My Bad! 😅 I did't realize it while recording. Updated in the Pinned Comment Mate! Thank you for noticing
@Ematolah
@Ematolah 3 жыл бұрын
hey we cant add movment to the icons after we select them like that curved bottom navigation? how
@hesamtaleghani3309
@hesamtaleghani3309 3 жыл бұрын
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
@steeve47 2 жыл бұрын
Did you find a solution for that issue @hesam
@martinglanz
@martinglanz 2 жыл бұрын
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
@vooveen Жыл бұрын
same problem, did you find the solution
@DSOnur
@DSOnur 3 жыл бұрын
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
@Im_Solo57 3 жыл бұрын
You make it a widget that can be added to all your pages.
@mochtetr
@mochtetr 3 жыл бұрын
@@Im_Solo57 how
@sucharita6070
@sucharita6070 3 жыл бұрын
if someone presses the other buttons and it navigates to another screen.. the bottom bar will disappear right? how to make it stick ?
@chrish.7402
@chrish.7402 2 жыл бұрын
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!
@АлексйУваровъ
@АлексйУваровъ 4 жыл бұрын
Bravo!!!
@nandaletro
@nandaletro 3 жыл бұрын
Cool. But don’t you need to use the scaffold bottom nav property and pass on your custom widget?
@adilaytan3870
@adilaytan3870 4 жыл бұрын
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?
@umut12351
@umut12351 4 жыл бұрын
Where were you 2 weeks ago ? Now I need to rewrite code man. Thank you though :)
@luisfelipevillamizartorres7576
@luisfelipevillamizartorres7576 4 жыл бұрын
Nice....
@madhusudhanr3527
@madhusudhanr3527 4 жыл бұрын
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
@RetroPortalStudio 4 жыл бұрын
Set "Always On Top" in Emulator Settings ✌
@madhusudhanr3527
@madhusudhanr3527 4 жыл бұрын
@@RetroPortalStudio super dude! Thanks a lot👍
@lightupledbulbs4139
@lightupledbulbs4139 4 жыл бұрын
I'm a beginner guide me Where to paste my other content?
@manavgoyal631
@manavgoyal631 4 жыл бұрын
Cool😯
@adriencalas764
@adriencalas764 3 жыл бұрын
👏
@mr.cherrykim9897
@mr.cherrykim9897 4 жыл бұрын
Can u plz tell me how to do it in java ?
@RetroPortalStudio
@RetroPortalStudio 4 жыл бұрын
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
@mr.cherrykim9897 4 жыл бұрын
@@RetroPortalStudio thank you 👍
@devangtak6894
@devangtak6894 4 жыл бұрын
It's superb, But is it responsive ? ? ?
@pegasis3646
@pegasis3646 4 жыл бұрын
Use double.infinity for width of the container instead of size.width, then the container will take all the available space.
@flyingwhiteindian
@flyingwhiteindian 4 жыл бұрын
@@pegasis3646 But he's using percentages of width, so a percentage of infinity wouldn't work
@MarcellodeSales
@MarcellodeSales 3 жыл бұрын
Why not sharing the open-source code of the video?
I Helped 2,000 People Walk Again
15:31
MrBeast
Рет қаралды 12 МЛН
Сестра обхитрила!
00:17
Victoria Portfolio
Рет қаралды 958 М.
Top 10 Widgets every Flutter Developer should know!
17:17
RetroPortal Studio
Рет қаралды 283 М.
Implementing complex UI with Flutter - Marcin Szałek | Flutter Europe
44:26
Flutter UI Design Series | Episode 1 | Flutter UI Design Tutorial
26:51
RetroPortal Studio
Рет қаралды 130 М.
FLUTTER Animated Custom Bottom Navigation Bar with Custom Clipper | Flutter Tutorial
19:10
Top 10 Must Know Widgets In Detail for Flutter Developers | Flutter Tutorial
1:09:13
Bottom Nav Bar in Flutter using Stacked
10:56
FilledStacks
Рет қаралды 20 М.
🖥📱RESPONSIVE DESIGN • Flutter Tutorial
8:03
Mitch Koko
Рет қаралды 306 М.
Flutter Custom Painter Tutorial || Clock App (Episode-1)
16:31
Сестра обхитрила!
00:17
Victoria Portfolio
Рет қаралды 958 М.