Flutter Bottom Navigation bar - Persisting Navigated Pages

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 พ.ย. 2024

ความคิดเห็น • 70

  • @juanvieira8249
    @juanvieira8249 4 ปีที่แล้ว +21

    great video, thanks!
    One note I found useful:
    You can replace the color calculation for the tab icons by using the 'currentIndex', 'selectedItemColor', 'unselectedItemColor' properties in bottom navigation:
    bottomNavigationBar: BottomNavigationBar(
    currentIndex: this._currentIndex,
    selectedItemColor: Colors.green,
    unselectedItemColor: Colors.white,
    backgroundColor: Colors.black,
    ....
    I think it's a bit cleaner
    and a fun tip: try setting the property 'type: BottomNavigationBarType.shifting,' and add 'backgroundColor: {yourColor},', it's a super cool animation!

  • @lonely1642
    @lonely1642 2 ปีที่แล้ว

    I really appreciate it, brother. After viewing your video, I was able to debug my code even though I had been stuck on indexing for nearly 4 hours.💕💕

  • @JasonThai
    @JasonThai 3 ปีที่แล้ว +2

    This is what I call a "real tutorial", it's useful, thanks mate!

  • @aleksybalazinski
    @aleksybalazinski ปีที่แล้ว

    Superb! Just what I needed! You're a life saver man

  • @SisirKumarPathy
    @SisirKumarPathy 4 ปีที่แล้ว +4

    Nice video. The catch is the "AutomaticKeepAliveClientMixin" to keep pages persist. Just 1 thing that to change the selection in the bottom navigation bar, using the "currentIndex" property is muchmore simpler an better. That will automatically change the selection and change the selection/deselction colors. That will also give a small animation for the transition

    • @mithuns8410
      @mithuns8410 3 ปีที่แล้ว

      Does it work with infinite scroll Sliver list

    • @boonchaan
      @boonchaan 3 ปีที่แล้ว +1

      30 min resumed in one comment

  • @program2445
    @program2445 7 หลายเดือนก่อน

    Thank you very much bro thatsa real tutorial

  • @makindeabass9661
    @makindeabass9661 4 ปีที่แล้ว +8

    Awesome!!! We can simply setState of our currentIndex variable to always take the index of our current screen/page in our onTap function instead manually changing the color when tap
    onTap: (int index){
    setState(() {
    print(index);
    _currentIndex = index;
    _pageController.jumpToPage(index);
    });
    },

  • @kaito3131
    @kaito3131 4 ปีที่แล้ว +3

    Nice
    Which is better using ur approach or using indexedstack ??

    • @braz1080
      @braz1080 4 ปีที่แล้ว +1

      IndexedStack is very performance heavy.
      It'll work like a stack.. so better to use this than indexed stack.. but there are use cases when you'd want to use it. Idk the use cases for IndexedStack.

  • @mohsinreshi3637
    @mohsinreshi3637 4 ปีที่แล้ว +2

    Just what I was looking for! Thank You!

  • @patrickcheseren905
    @patrickcheseren905 4 ปีที่แล้ว +1

    Pure content! Exactly what i needed. Thanks a lot.

  • @Nef4sTe
    @Nef4sTe 4 ปีที่แล้ว +9

    What if you need deep navigation, like clicking on a blog and then going to another screen and coming back, can you save every states ?

  • @vmanikandan779
    @vmanikandan779 4 ปีที่แล้ว +1

    Thank you so much .. It was very clear and it worked really well

  • @rawabiahmad3574
    @rawabiahmad3574 7 หลายเดือนก่อน

    Thank you ,Thank you ,Thank you ,Thank you .

  • @althafaralijaffarali1803
    @althafaralijaffarali1803 4 ปีที่แล้ว

    Thanks a lot man! Everything worked perfectly. My 1st UI 😅

  • @josephkennedy3200
    @josephkennedy3200 3 ปีที่แล้ว

    Thanks for this video
    Really appreciated

  • @tamimchowdhury9506
    @tamimchowdhury9506 3 ปีที่แล้ว

    Amazing tutorial and great coding flow!

  • @mikeruusan
    @mikeruusan 4 ปีที่แล้ว

    keep uploading tutorials like this bro. I just subscribed!

  • @gauthamg5607
    @gauthamg5607 2 ปีที่แล้ว

    Great tutorial. Thank's a lot.

    • @PodCoder
      @PodCoder  2 ปีที่แล้ว

      Glad you enjoyed it!

  • @KeKe4ever131
    @KeKe4ever131 ปีที่แล้ว

    great tutorials! please I would love to know that all those short cut keys you use to create code snippets and change all keywords at the same time so fast, please guide me some info on these? or record a new tutorial on these shortcuts? thanks!

  • @cassidy318
    @cassidy318 ปีที่แล้ว

    THANK YOU SO MUCH!!

  • @mustafaismail692
    @mustafaismail692 4 ปีที่แล้ว

    Thank you very much . Great tutorial

  • @pariahincognito3914
    @pariahincognito3914 2 ปีที่แล้ว

    Great tutorial! This is exactly what I'm looking for. Thanks! It'd be nice to have a link to a GitHub repo tho. :)

    • @PodCoder
      @PodCoder  2 ปีที่แล้ว +1

      Thanks for being here.
      Unfortunately I forgot to push the code to a Github repo before deleting 😥

  • @nadjibrebahi9554
    @nadjibrebahi9554 3 ปีที่แล้ว +2

    Try to use currentIndex in BottomNavigationBar instead of if / else index checking

  • @rodrigorodriguezmacias3357
    @rodrigorodriguezmacias3357 3 ปีที่แล้ว

    Gracias por el tutorial me sirvio de mucho saludo crack eres grande😉😉

  • @lyboung8749
    @lyboung8749 4 ปีที่แล้ว

    Thank a lot for the video. great explaination

  • @SyedHaroon786
    @SyedHaroon786 3 ปีที่แล้ว +2

    you can do:
    bottomNavigationBar: BottomNavigationBar(
    onTap: _onNavBarItemTap,
    items: [... ],
    currentIndex: _selectedIndex,
    selectedItemColor: Colors.amber[800],
    ),

    • @TheGen30
      @TheGen30 2 ปีที่แล้ว +1

      In 2022 it solves the choice of color for the BottomNavigationBarItem label!

  • @ricard458
    @ricard458 3 ปีที่แล้ว

    Very useful tutorial! Thanks, I need to use Text widget, but the BottomNavigationBar don´t allow it. How can I replace the BottomNavigationBar with a similar functionality that allow me to have Text widght or Image widget?

  • @jonathancorrea3903
    @jonathancorrea3903 4 ปีที่แล้ว

    Awesome video, thanks. ¿What is the name of your color theme btw? I loved it.

    • @PodCoder
      @PodCoder  4 ปีที่แล้ว +1

      🙏❤️
      Material theme

  • @علياءاسامه-ت4م
    @علياءاسامه-ت4م 3 ปีที่แล้ว

    great tutorial

  • @algeriennesaffaires7017
    @algeriennesaffaires7017 4 ปีที่แล้ว

    very very useful video thank you

  • @hirokinakanishi4254
    @hirokinakanishi4254 3 ปีที่แล้ว

    Thank you!!

  • @HassanAli-cf5ms
    @HassanAli-cf5ms 3 ปีที่แล้ว

    Thank You and i Love You

  • @aungmyooo9692
    @aungmyooo9692 3 ปีที่แล้ว

    if I have 10 pages and I use 4 Bottom navigation items. What about the rest of the pages. I want all of my 10 pages with same navigation bar. I only saw same pages with same bottom navigation items example.

  • @GustavoRodrigues-le3zw
    @GustavoRodrigues-le3zw 3 ปีที่แล้ว

    Thank you!

  • @berkink5303
    @berkink5303 3 ปีที่แล้ว

    Thanks for the video! I just got one Problem:
    Everything works fine but it will only show me the texts in the BottomBar of the first icon. The other ones wont show up. What can I do? Thank you very much!

  • @rsocial453
    @rsocial453 3 ปีที่แล้ว

    Thank you

  • @alitonoliveira1700
    @alitonoliveira1700 4 ปีที่แล้ว +4

    How to persiste data and the bottomnavigationbar when we click on any item of the list?
    In Android Java, we can create as many pages as we want and navigate through them easely, keeping the bottomnavigationbar and back arrow in the Appbar.

    • @thegreenboxindia3579
      @thegreenboxindia3579 4 ปีที่แล้ว +1

      Actually PodCoder, the solution to the above question will be awsome, or if anyone else has it.

    • @M.......A
      @M.......A 4 ปีที่แล้ว

      Check coding with Andrea

    • @alitonoliveira1700
      @alitonoliveira1700 4 ปีที่แล้ว

      @@M.......A Thank you for the tip. I found the link below and if you have an updated or better approach, please post a link for us.
      codewithandrea.com/articles/2018-07-07-multiple-navigators-bottom-navigation-bar/

  • @heenatewani7132
    @heenatewani7132 4 ปีที่แล้ว

    AutomatickeepAliveClientMixin is not working for swiper can u suggest how to persist the state for more than 50 pages implemented using flutter swiper?

  • @amber.k
    @amber.k 4 ปีที่แล้ว

    can you tell what is PageStorageBucket and PageStorage?

  • @huguesbomo9297
    @huguesbomo9297 3 ปีที่แล้ว

    Thank you so much

  • @fluttermakers
    @fluttermakers 3 ปีที่แล้ว

    thanks a lot

  • @Ali-cb3xt
    @Ali-cb3xt 4 ปีที่แล้ว

    Thanks a lot !

  • @vincentcauchy7442
    @vincentcauchy7442 3 ปีที่แล้ว

    Good explanation thanks.
    I have try that and it work. But I have a problem.
    When I hot restart, the bottom navigator bar disappear, How can I solve this? Also, when close the app and reopen, the bottom navigator is not showing.
    Thank you for any help.

  • @souravchatterjee9418
    @souravchatterjee9418 3 ปีที่แล้ว

    6:48 starting

  • @johnmartin9329
    @johnmartin9329 2 ปีที่แล้ว

    super.build(context); showing error this method is always abstracted in super class why

  • @pocketjacky
    @pocketjacky 4 ปีที่แล้ว

    awesome!!!!!!!!

  • @shubhamnaik4205
    @shubhamnaik4205 4 ปีที่แล้ว

    Please make this video with page storage key concept

  • @davorradic8349
    @davorradic8349 3 ปีที่แล้ว

    if you click on one of the blog posts and you go to blog post...I loose the tabs...I dont want to loose tabs

  • @mohmmedabd-alrazaq3913
    @mohmmedabd-alrazaq3913 4 ปีที่แล้ว

    so when i have http request in each page , how send http request only when page show for user ?

    • @PodCoder
      @PodCoder  4 ปีที่แล้ว

      If you apply a state management solution with this it would be great.
      But if you have a small app, then you can call http request in DidChangeDependencies

  • @laraibanwar1618
    @laraibanwar1618 4 ปีที่แล้ว

    Can u share the link of ur code in github

  • @raymondmichael4987
    @raymondmichael4987 4 ปีที่แล้ว

    Very handy

  • @ramonpaolomaran2253
    @ramonpaolomaran2253 4 ปีที่แล้ว

    Hello. I am having error in "super.build(context);" that is: "The method 'build' is always abstract in the supertype.".
    Sorry for my english

  • @hyperlang4624
    @hyperlang4624 4 ปีที่แล้ว

    hello @PodCoder
    please make video on how to add 'can go then go back on webview on backPressed'
    please make video on it
    and also download listener on webview
    please
    please
    please

  • @multiservicosreptecno3786
    @multiservicosreptecno3786 4 ปีที่แล้ว

    .😃👏🏽👏🏽👏🏽👏🏽👏🏽👏🏽👏🏽👏🏽👏🏽.

  • @ahmedgames9335
    @ahmedgames9335 3 ปีที่แล้ว

    thank you very much