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

Поділитися
Вставка
  • Опубліковано 18 гру 2024

КОМЕНТАРІ • 128

  • @RetroPortalStudio
    @RetroPortalStudio  4 роки тому +16

    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 роки тому +23

    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 .. ua-cam.com/video/AnKgtKxRLX4/v-deo.html you're gonna love this!

  • @rida_brahim
    @rida_brahim Місяць тому

    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 ❤

  • @inwm07gmailcom
    @inwm07gmailcom 4 роки тому +12

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

  • @ricksondpenha
    @ricksondpenha 4 роки тому +7

    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!

  • @someshsahu4638
    @someshsahu4638 Рік тому +3

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

  • @rezahosseinypour6669
    @rezahosseinypour6669 3 роки тому +1

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

  • @mercysparks1403
    @mercysparks1403 4 роки тому +3

    Thanks for providing us the best flutter tutorials constantly !

  • @go-hi-speed
    @go-hi-speed 2 роки тому +1

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

  • @minigeek
    @minigeek 4 роки тому +3

    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 роки тому +1

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

  • @vatan2578
    @vatan2578 4 роки тому +2

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

  • @prajwalc5595
    @prajwalc5595 3 роки тому +2

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

  • @ImpresifMediaDev
    @ImpresifMediaDev 2 роки тому +1

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

  • @leithhobson
    @leithhobson 4 роки тому +2

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

  • @tsioryfitiavanaanhykrishna6992
    @tsioryfitiavanaanhykrishna6992 4 роки тому +1

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

  • @rohitkumar-ku4ki
    @rohitkumar-ku4ki Рік тому +1

    nice man. really nice explanation.

  • @NISARAHMED-is2di
    @NISARAHMED-is2di 2 роки тому +1

    Great dear. You are the best

  • @akhilprazapati6148
    @akhilprazapati6148 4 роки тому +1

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

  • @mohsinmaliky6614
    @mohsinmaliky6614 2 роки тому +1

    subscribed. good job sir. well explained. thank you

  • @parsagh2192
    @parsagh2192 2 роки тому +1

    That was fantastic !!

  • @rafales1525
    @rafales1525 4 роки тому +2

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

  • @sawkhinmaungthoo5063
    @sawkhinmaungthoo5063 3 роки тому +1

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

  • @konfinoyair
    @konfinoyair 3 роки тому +1

    King of Flutter

  • @POPOEVER
    @POPOEVER 4 роки тому +1

    Very well explained, great work, bruh👍👍👍

  • @TheFlutterWay
    @TheFlutterWay 4 роки тому +1

    Greate video brother, really like your videos.

  • @PrabowoMurti
    @PrabowoMurti 4 роки тому +1

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

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому

      This will help you out ua-cam.com/video/AnKgtKxRLX4/v-deo.html ✌😁

  • @farouklilou4527
    @farouklilou4527 4 роки тому +2

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

  • @Khaleel_Jageer
    @Khaleel_Jageer 4 роки тому +1

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

  • @kymzTech
    @kymzTech 4 роки тому +2

    Nice u explanation are dope

  • @adttwo
    @adttwo 2 роки тому

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

  • @Endersontutoriales
    @Endersontutoriales 4 роки тому +1

    incredible explanation, thanks for your videos!! :D

  • @xuantung8660
    @xuantung8660 4 роки тому +1

    This is so cool. Very good tutorial.

  • @paanoop
    @paanoop 3 роки тому +1

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

  • @S-Lomar
    @S-Lomar Рік тому +1

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

  • @MohammedNaji-l2k
    @MohammedNaji-l2k 2 роки тому +1

    good job man

  • @connelasikong8069
    @connelasikong8069 3 роки тому +1

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

  • @satoshi-f2i
    @satoshi-f2i 3 роки тому +1

    Great tutorial!!!!!

  • @KhatwangaSivaKiranSeesala
    @KhatwangaSivaKiranSeesala 4 роки тому +2

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

  • @lakshminarayanans1066
    @lakshminarayanans1066 4 роки тому +1

    Absolutely loved the content. Thank you!

  • @gmiak_dv
    @gmiak_dv 3 роки тому +1

    Very useful and instructive 👏👏 Thank you !

  • @Mark-mo4bo
    @Mark-mo4bo 3 роки тому

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

  • @christophersantos4833
    @christophersantos4833 4 роки тому +1

    Quality content! Subscribed.

  • @lalanaibova9284
    @lalanaibova9284 2 роки тому +1

    wow, great !!

  • @pulkitprajapat7862
    @pulkitprajapat7862 4 роки тому +1

    this is so cool. thanks a lot man

  • @emelinepal
    @emelinepal 3 роки тому +1

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

  • @adityasapra821
    @adityasapra821 3 роки тому +1

    amazing logic!

  • @vandeljasonstrypper6734
    @vandeljasonstrypper6734 2 роки тому +1

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

  • @jamilurrehmanamini4878
    @jamilurrehmanamini4878 3 роки тому +1

    You are genius

  • @DarkHeros09
    @DarkHeros09 4 роки тому +1

    Another masterpiece 👍.

  • @rafi_45
    @rafi_45 4 роки тому +1

    Good concept. Keep up

  • @alexpeiretti7486
    @alexpeiretti7486 4 роки тому +1

    Useful, thanks dude :)

  • @alvarogonzalezrico9440
    @alvarogonzalezrico9440 3 роки тому +3

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

  • @cavalinhopocoto
    @cavalinhopocoto 3 роки тому +1

    Amazing 😍

  • @knpddu
    @knpddu 3 роки тому

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

  • @ibensalcie
    @ibensalcie 4 роки тому

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

  • @excellencemichel4875
    @excellencemichel4875 4 роки тому +1

    That is amazing good. Thank you so much.

  • @alitonoliveira1700
    @alitonoliveira1700 4 роки тому +1

    Awesome!

  • @Ksl.23
    @Ksl.23 4 роки тому +1

    Thanks a lot mate

  • @علاءالدينعباسي-ب6ث
    @علاءالدينعباسي-ب6ث 2 роки тому +1

    Thanks a lot

  • @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?

  • @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?

  • @BDCCN-NguyenKiemTan
    @BDCCN-NguyenKiemTan 3 роки тому +1

    awesome

  • @calebmoses5453
    @calebmoses5453 3 роки тому

    thanks a lot it was really usefull

  • @animegod2474
    @animegod2474 8 місяців тому +1

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

  • @Berke-Khan
    @Berke-Khan 3 роки тому

    amazing

  • @oxglowinc.1614
    @oxglowinc.1614 3 роки тому +1

    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.

  • @yadjnishnursiah8621
    @yadjnishnursiah8621 4 роки тому +1

    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 ?

  • @BrYarDJ
    @BrYarDJ 4 роки тому +1

    very nice

  • @АлексйУваровъ
    @АлексйУваровъ 4 роки тому +1

    Bravo!!!

  • @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?

  • @marcodecarolis9052
    @marcodecarolis9052 4 роки тому +1

    ok you are the best

  • @ali123aly
    @ali123aly 2 місяці тому

    You have a good English accent

  • @prankcial4187
    @prankcial4187 4 роки тому +1

    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

  • @manavgoyal631
    @manavgoyal631 4 роки тому +1

    Cool😯

  • @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

  • @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?

  • @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!

  • @0_0-o7y9r
    @0_0-o7y9r 3 роки тому

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

  • @nandaletro
    @nandaletro 3 роки тому

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

  • @geofaniweni9845
    @geofaniweni9845 Рік тому

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

  • @pratt4696
    @pratt4696 3 роки тому +1

    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

  • @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

  • @gauravthakkar802
    @gauravthakkar802 4 роки тому

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

  • @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

  • @luisfelipevillamizartorres7576
    @luisfelipevillamizartorres7576 4 роки тому +1

    Nice....

  • @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

  • @umut12351
    @umut12351 4 роки тому

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

  • @hesamtaleghani3309
    @hesamtaleghani3309 3 роки тому +1

    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

  • @DSOnur
    @DSOnur 3 роки тому +1

    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 2 роки тому

      @@Im_Solo57 how

  • @Ematolah
    @Ematolah 3 роки тому

    hey we cant add movment to the icons after we select them like that curved bottom navigation? 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 ?

  • @adriencalas764
    @adriencalas764 3 роки тому +1

    👏

  • @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?

  • @madhusudhanr3527
    @madhusudhanr3527 4 роки тому +1

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

  • @lightupledbulbs4139
    @lightupledbulbs4139 4 роки тому

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

  • @mr.cherrykim9897
    @mr.cherrykim9897 4 роки тому +1

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

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому +1

      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 👍

  • @isantechnologies3131
    @isantechnologies3131 4 роки тому

    can i add name for each icon?

  • @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 роки тому +2

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