Flutter Bottom Navigation with Nested Routing (Auto Route)
HTML-код
- Опубликовано: 9 сен 2024
- 📗 Learn from the written tutorial & get the code 👇👇
resocoder.com/...
📧 Get Flutter news 📰 and resources:
👉 flutter.education
👨💻 Do you write good code? Find out now!
resocoder.com/...
Routing in Flutter is a vast topic as it can be executed in many different ways. Having a logical and simple to navigate routing setup will directly translate into a better user experience. It will also make the code a lot more maintainable for the developers.
Configuring routing in Flutter, specifically with Navigator 2.0 can be very tedious and time consuming. This is where AutoRoute comes in with its intuitive API and handy code generation that will save you lots of time and effort.
In this lesson you’ll learn how to leverage the simplicity of the AutoRoute and Salomon Bottom Bar packages to create an elegant bottom navigation bar configured with nested routing.
Go to my website for more information, code examples, and articles:
● resocoder.com
Follow me on social media:
● / resocoder
● / resocoder
● / resocoder
Hello welcome to reso coder we're going to prepare for real app development 😌
The nested navigation had always been a serious problem with conflicts arising between Flutter Devs and designers until now.
A correction at 24:28 :
final _appRouter = AppRouter(); should be outside the build method, else it'll reset the app's router by creating a new instance of router on each hot reload and devs will have no clue as to why the app's route is getting reset to the initial route.
final _appRouter = AppRouter(); should be outside the build method
Can Someone help me !! My doubt is that when we click on post the post page pop up with bottom navigation bar that's perfectly okzy but i want that when we click on user1 i want to display user1 page only without bottom bar how can we do that anyone want to test there knowledge please drop a solution ..
@@rajatkhoware2364 open that one in a new page using simple navigation and that is it
Flutter community needs you please come back
At 24:10 it is said that the router must be created inside the build method. But in the docs, in "Finalize the setup" section, they specifically indicate that the router must be placed outside the build method
Very good catch! This issue also was preventing hot-reload from working.
Can Someone help me !! My doubt is that when we click on post the post page pop up with bottom navigation bar that's perfectly okzy but i want that when we click on user1 i want to display user1 page only without bottom bar how can we do that anyone want to test there knowledge please drop a solution ..
Good tutorial. there's an error though:
final _appRouter = AppRouter();
That code should be OUTSIDE the build method. If it's inside I think hot reload gets screwy
Thank you very much !
Thanks
Can Someone help me !! My doubt is that when we click on post the post page pop up with bottom navigation bar that's perfectly okzy but i want that when we click on user1 i want to display user1 page only without bottom bar how can we do that anyone want to test there knowledge please drop a solution ..
This is the video I wanted to learn from the days.
Is there a way to not 'blink' the screen while I change the routes?? (In the video example, the 'blink' color is indigo, I tried to change it into 'transparent', but the 'blink' turns into black) 😢
One of the best flutter channel
To be able to use it with the most recent flutter versions, you have to update auto_router v3.2.0 and auto_router_generate v3.2.0. Older versions has some conflicts with new flutter SDK. And then you will get some errors while running build_runner. The solution is to delete the pubspec.yaml.lock file and run pub get again.
Thank yo so much for this comment. Saved me some googling :)
Can Someone help me !! My doubt is that when we click on post the post page pop up with bottom navigation bar that's perfectly okzy but i want that when we click on user1 i want to display user1 page only without bottom bar how can we do that anyone want to test there knowledge please drop a solution ..
Might have been better giving an overview diagram of autoroute structures rather than diving straight into code, you could then refer back to it to make it clear. Some people can work with a detail up approach but some prefer an overview and the demo app intro needs a link between that, the structure you're going to implement to achieve it and the code. Just a suggestion 👍
Can Someone help me !! My doubt is that when we click on post the post page pop up with bottom navigation bar that's perfectly okzy but i want that when we click on user1 i want to display user1 page only without bottom bar how can we do that anyone want to test there knowledge please drop a solution ..
exatly at the time when i needed it ,thanks alot
Thank you so much for this tutorial, I took advantage of the infos a lot :-)
Been needing this for a long time. Thank you !
Nice tutorial, but how to navigate to a literally new page? (I don't want my bottom navbar still showed when I navigated to other screen). Following the current tutorial made the navigation bar stay still at the bottom with its current page state :(
Thanks :) I wonder where i need to put "BlocProvider" widget and can i access global bloc from nested route child to write "context.read()"
Gold content as always.
Thank you! Very Helpful tutorial
Beautifully done! Thank you.
Thanks so much!..
Perfect and clear explanation with supported scenarios. Thank you.
Can I make this with native flutter? I don't want to use auto route
Bro how to make transparent and blur bottom navigation bar ??
I think, backdrop filter Is it right
And what about performance issues? Switching from tab to tab and keeping all the pages alive will affect the performance of the app. Am I wrong?
good job, i really appreciate it all your effort to make videos so details
There are some nested bottom tab route. Some tabs needs authenticate and some tabs dont need. So how can i add adguard to nested bottom tabs? (I can add adguard to main routes, thats ok but i couldnt navigate to nested bottom tab route which needs auth.)
Big Thanks to you🙏🙏
I need a help on this
can I do the screen init again when I tap on the bottom bar again like another bottom bar?
This has really helped - thank you. I'm trying to change the title of the appbar, based on the route you're currently looking at. Is there a way to access and change the title from within one of the pushed pages? for example, when viewing the post or a user profile?
How to add some screen like login screen in routes before bottom bar screen ?
what are the prerequisites for learning this?
Great Tutorial , thanks so much
Hi when we need nested navigation, so i case i develop Ecommerce for web and bobile?
I'm using Provider and wraps it on my routes but since I'm gonna need to restructure it for AutoRoute, will it affect the entire thing?
How would you go about replicating the youtubr bottom nav behavior whereby you go back to the previous tab when you click on android back button .. like a navigation history is being saved somehow..
thanks for this video tutorial
😍Nice Tutorial Keep it Up...
EmptyRoute now is no a part of Auto route. How can I handle nested route like your ?
restarting the IDE should fix EmptyRoutePage missing issue
So its only 2 level nested pages. What about dynamic? from post to user and then from user to post then to comment section
Can Someone help me !! My doubt is that when we click on post the post page pop up with bottom navigation bar that's perfectly okzy but i want that when we click on user1 i want to display user1 page only without bottom bar how can we do that anyone want to test there knowledge please drop a solution ..
grrreaaattt tutorial, thanks
Amazing!!! Thank you
you saved me :)
Great video
But I have a question when having nested routes the RouteGuard does not work?
Can you please make a video about RouteGuard it'll be great
Could you please make a video on how to cache images and manage it in order to reduce the read count from the database. Thank you!
how would i do it if i want to pass constructor that is not a string
what happen if my first screens are login and onboarding and then home screen with the bottom nav bar? .. btw amazing tutorial thanks1
Thank you
great video i must say. please how do how i build the widget if i click the bottom navigation icon. everytime i click an icon, it always return a static page.
Nice Video please make a video on GetX Flutter
Great video. Can you also show it on flutter web? Or better... on both
Most probably already works on web, u just have to run it on the web emulator/chrome
HI and thank you for the tutorial , I have two questions , how can we customize the appBar for the nested routes to be completely different and independent from the main one ?
Can the auto route hold the navigation stack history so we can add a feature that enables going back to the previous tab on device back button press ?
Keep up the quality content :)
You can make any appBar widget, make sure the parent is PPreferredSize widget. You can make any child widget of PreferredSize
@@RunAman you would have to do some state management to show a custom appBar according to the new nested route arguments for example page1/page2.
You can use state management that widget, like you can customise it like you want it. Though it's not necessary.
Can Someone help me !! My doubt is that when we click on post the post page pop up with bottom navigation bar that's perfectly okzy but i want that when we click on user1 i want to display user1 page only without bottom bar how can we do that anyone want to test there knowledge please drop a solution ..
Great tutorial, but how to navigate from one tab router to another tab nested router using push method
How can AutoRoute handle multiple path parameters?
THANK YOUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU
Great stuff!! How do we go about combining this with a navigation rail for example?
❤️ from Pakistan
Migration to version 6 ?
How to restart the build method on TabPage or not save the stack state when switching tabs. I should have an animation run in the build method on TabPage every time I switch a tab in the navigation bar
Found answer?
Its never late. I dont know why that is not described in docs. Spent hours for realize.
You need to pass dynamic key to your route:
UserDetailRoute(
key: ValueKey('user-${author.id}'),
id: author.id,
)
When I clone or download zip starter project, why always final project gets downloaded? Can anyone please help me out!
The links point to the same repository, just different commits. If you clone the repo, you need to run *git checkout *. The commit id is *66e1a2e* in this case.
@@ResoCoder Thanks for your reply, I did the same and achieved what I wanted. Thanks for this awesome video.
Getx package make nested router much better
How so ? Any article or link to share ? Thx
Do you have link github?
There is little complex to understand for me!
Hello
can I have a code?
try to use simple example
where source noob?
99 dependencies for a basic feature...
This sounds kinda weird to me.
If I was a girl I'd sound like you
What!?
Hello
I have the AutoTabRouter in bottom navigation
And also have inner AutoTabsRouter from this section I have to set active index for main AutoTabsRouter
I have made like this but it is not working
AutoTabsRouter.of(scaffoldKey.currentContext!)
.setActiveIndex(2, notify: true);
Excellent tutorial ! Thank you