How to Build a Bottom Navigation Bar with Nested Routes Using Flutter Go Router

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ม.ค. 2025

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

  • @HeyFlutter
    @HeyFlutter  3 หลายเดือนก่อน

    👉 Check out the Source Code: github.com/HeyFlutter-Public/nested-routes-using-go-router
    👉Join 12-Week Flutter Training: heyflutter.com
    👉Join the WhatsApp Channel to get the latest news about Flutter & HeyFlutter: www.whatsapp.com/channel/0029VaDNCZtC1Fu8nL2vmw3f

    • @emansh9506
      @emansh9506 2 หลายเดือนก่อน

      I paid for the bootcamp, but they didn't enroll me in, and they are not replying to my emails 😊

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

      Thanks a lot team. I followed this only. Please try an activity.
      1. Create a list in ur home or any route.
      2. On press of any item in the list, just navigate to any screen
      3. Deploy the same app as web application
      Problem I have realized is that the bottom navigation urls remain, but the further navigation urls do not change - although the navigation works. Then I have also relized issue in the web while navigating back. Try 2 levels drill down with browser level lav back (not app back button). Try it. Its interesting

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

      Found a solution. Add the below 2 lines at the beginning of ur main.dart and restart the app
      usePathUrlStrategy();
      GoRouter.optionURLReflectsImperativeAPIs = true;

  • @tutorial3473
    @tutorial3473 3 หลายเดือนก่อน

    Honestly, it’s almost impressive how they managed to turn it into a Schrödinger’s package-both broken and not broken at the same time! Truly a masterclass in chaos. Bravo!

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      Thanks for your feedback, @tutorial3473! 🙂

  • @dhrubajyotirakshit
    @dhrubajyotirakshit 2 หลายเดือนก่อน +3

    There is usually a scenario where on click of an item in the list page, you need to do to the detail page. That detail page is shown without the bottom navigation bar. For example: On click of a user in linkedin. How to implement that.
    Please note: We can share that link and on press of that, the url/route directly opens. I am not asking you to implement app links here, but the architecture can be done with that in mind.
    A good solution of this will really help your followers

    • @HeyFlutter
      @HeyFlutter  15 วันที่ผ่านมา

      Thank you ❤️ for the suggestion! We’ll definitely consider it for our future content ideas. 😊

  • @ramzibouhadjar
    @ramzibouhadjar 3 หลายเดือนก่อน

    I was searching for this solution my whole life !

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน +1

      Thank you, @ramzibouhadjar! 🙂

  • @alexmuller6571
    @alexmuller6571 3 หลายเดือนก่อน

    Danke!

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      Thank you, @alexmuller6571! 🙂

  • @adebayowemimo4212
    @adebayowemimo4212 3 หลายเดือนก่อน +1

    Amazing tutorial as at time it's needed

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      Glad to hear that, Thank you @adebayowemimo4212! 😊

  • @RobelLumasag-yw4dc
    @RobelLumasag-yw4dc 3 หลายเดือนก่อน

    Thank you, amazing information!

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      Glad you liked it, @RobelLumasag-yw4dc 😀

  • @ramoncaldeira6851
    @ramoncaldeira6851 2 หลายเดือนก่อน

    Your videos is very nice!

    • @HeyFlutter
      @HeyFlutter  2 หลายเดือนก่อน

      Glad you like them! 💙

  • @nixjavi7220
    @nixjavi7220 3 หลายเดือนก่อน

    Amazing information! Thanks!

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      You are welcome, @nixjavi7220!

  • @nikhilkukreja8498
    @nikhilkukreja8498 3 หลายเดือนก่อน

    Awesome man thank you so much :)

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      You’re most welcome, @nikhilkukreja8498! 🙂

  • @oluwatobiakintola674
    @oluwatobiakintola674 2 หลายเดือนก่อน

    This is so cool

    • @HeyFlutter
      @HeyFlutter  2 หลายเดือนก่อน

      Thanks 😊

  • @tmyker
    @tmyker 3 หลายเดือนก่อน

    Can you have a solution, when you stay in a subpage, re-press the button nav, to go back to the first page (parent page)?

  • @ramoncaldeira6851
    @ramoncaldeira6851 2 หลายเดือนก่อน

    amazing

  •  3 หลายเดือนก่อน

    Thank you amazing tutorial. I use Getx in my application when I use nested page and hot releoad forget last position. I will try go router 😅

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      Thank you

  • @rohanstha
    @rohanstha 3 หลายเดือนก่อน +1

    I have a question. How to add popScope on go router's bottom navigation? I have wrapped the bottom navigation widget wit popScope but its not working.

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      Hey @rohanstha 😀 popScope should be screen/page level not for random widget in widget tree. Could you please elaborate more on what you are trying to achieve?

    • @rohanstha
      @rohanstha 3 หลายเดือนก่อน

      @@HeyFlutter I have bottom navigation bar similar as in video. I have wrapped bottom navigation bar's parrent scaffold with the popScope widget and written requird logic but its not working.

  • @MoayadAlKadry
    @MoayadAlKadry 2 หลายเดือนก่อน

    Thank you for the explanation!
    I have a question regarding state management with nested pages:
    Let's say I navigate deep into a series of pages within a tab on the BottomNavigationBar. When I switch to another tab and then return to the original tab where I navigated deeply, will I see the last page I reached within that tab, or will it reset to the initial page of that tab?

    • @HeyFlutter
      @HeyFlutter  15 วันที่ผ่านมา

      Thank you ❤️ for the suggestion! We’ll definitely consider it for our future content ideas. 😊

  • @sanmurdetpierre4020
    @sanmurdetpierre4020 3 หลายเดือนก่อน

    Great✨

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      Thank you, @sanmurdetpierre4020! 🙂

  • @smartcoder6494
    @smartcoder6494 3 หลายเดือนก่อน

    I have a question. How can we add a different type of transition between the nav bar screen? i am stuck in this situation with go_route. Can you please make a tutorial on it?

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      Thank You @smartcoder6494! Follow this link: stackoverflow.com/questions/57509373/bottom-navigation-bar-transition-in-flutter
      I hope you will get your answer 🙂

  • @mahmoudetman9027
    @mahmoudetman9027 3 หลายเดือนก่อน

    could you make it please with persistent_bottom_nav_bar
    please your explain is awesome
    I search a lot and don't found any one explain routing as your perfect
    can you explain it fastly
    and awesome videos keep going
    ❤‍🔥

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      Thanks for the idea, @mahmoudetman9027! 🙂 I have added it to my list of ideas for future videos!

  • @tmyker
    @tmyker 3 หลายเดือนก่อน

    Hi, nice tutorial but I have a case
    if I want a more button to nav home page, it not work
    static const String homePage = '/home';
    static const String explorePage = '/explore';
    static const String settingsPage = '/settings';
    static const String profilePage = 'profile';
    static const String nestedProfilePage = '/settings/profile';
    static const String nestedHomePage = '/settings/home';
    StatefulShellBranch(
    routes: [
    GoRoute(
    path: Routes.settingsPage,
    builder: (context, state) => const SettingsPage(),
    routes: [
    GoRoute(
    path: Routes.profilePage,
    builder: (context, state) => ProfilePage(
    user: state.extra as User,
    )),
    GoRoute(
    path: Routes.homePage,
    builder: (context, state) => HomePage(),
    ),
    ],
    ),
    ],
    ),
    I throw a exception,
    ' package : go_router/ src/
    Failed
    configuration. dart' :
    assertion: line 43 pos 18:
    route.path.startsWith('/') && I
    route. path. endsWith( ' / ')' :
    sub-
    route path may not start or end
    with "/" : GoRoute#6a5ed(name:
    "Home", path: "/home")
    See also:
    docs. flutter. dev/testing/errors

    • @tmyker
      @tmyker 3 หลายเดือนก่อน

      I work when I add new route

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      Thank You @tmyker! Follow this link: github.com/flutter/flutter/issues/145867
      I hope you will get your answer 🙂

    • @tmyker
      @tmyker 3 หลายเดือนก่อน +1

      @@HeyFlutter Thanks, but maybe it not a great answer to me

  • @nested9301
    @nested9301 3 หลายเดือนก่อน

    idon't know if you are aware of this but your website very janky and even simple navigation is so slow

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      Thanks, @nested9301! for your valuable feedback 🙂

  • @manishgautam2424
    @manishgautam2424 3 หลายเดือนก่อน

    no to go router , be with framework one

    • @Jivaa
      @Jivaa 3 หลายเดือนก่อน

      Go router is also an official flutter package, so you can safely use it👍

    • @manishgautam2424
      @manishgautam2424 3 หลายเดือนก่อน

      @@Jivaa yes it is from flutter team but native is best one

    • @androrifain
      @androrifain 3 หลายเดือนก่อน

      comment peux tu gérer les urls avec une navigation semblales à celle d'un navigateur web avec le framwork sans ce package ?

    • @HeyFlutter
      @HeyFlutter  3 หลายเดือนก่อน

      Thanks for your feedback, @manishgautam2424! 🙂

  • @toptrainers8426
    @toptrainers8426 15 วันที่ผ่านมา

    this is what i hate from you.. why don't you show the file structure?????

    • @HeyFlutter
      @HeyFlutter  13 วันที่ผ่านมา

      you have the source code