Keep Bottom Navigation Bar across Page Route [Flutter]
Vložit
- čas přidán 9. 06. 2020
- Persistent Bottom Navigation Bar across Page Route.
The Code - github.com/Kickbykick/Persist...
Medium Article by Andrea - / flutter-case-study-mul...
Twitch - / kickbykick
TIMESTAMPS
DIY Multiple Navigators - 00:30
Custom Navigator - 04:36
Cupertino Scaffold - 06:04
Burna Boy x Santan Dave Type Beat "Passionfruit" By RAMOON
🌠 Website 👉🏼: prodramoon.com
This is explained so well ! Thank you Thank you Thank you sooo much man! :) You really made my day. I would have gone crazy looking for a solution otherwise. God bless you & stay safe mate !
Man!!!!!! thankyou so much, the cupertinoTab is sooooo easy to deal with and much satisfying!!
About 4:20 in, your comment about the medium article code, lol. I think Andrea is a wonderly talented guy, I have learned a lot from him, and have taken classes with him and from others with a similar style, but I find myself rewriting it as we go because it just seems unbelievably complex. You have certainly summed it up in an understandable way, thank you!
I watch his videos and read he's article. He is definitely talented.
Thanks for the comment and for watching my video. : )
Best video so far. Exactly what i was looking for. Thank you so much you saved me so much headache ❤️
Awesome video man.. Finally someone making a video about how to actually deal with this weird navigation bar across different scaffolds
Tanks man, I use Cupertino because it is super simple and keep alive the instances. Very, very good explanation.
In case you did the DIY way. You may want to prevent some pages from using the ancestor's bottom navigation. I passed `rootNavigator: true` as this example:
Navigator.of(context, rootNavigator: true).pushReplacement(MaterialPageRoute(builder: (context) => new AuthScreen()));
Good luck
What about when you use the drawer? Wich globalkey should you use? Thanks.
Damn, i was stuck at this for ages.
Thanks man! But do you know how i can come back from this new page and show again my navigation bar?
I'm new to flutter. Which part is this placed? I cant find the Navigator.push portion in the source code
thanks! it was really helpful
I will be honest, I am new to flutter, and developing and learning it is most of the time is so exhausting mentaly
I feel the same way, I think Flutter makes things more complicated than it should be, just my opinion
@@glv2690 I believe in you, stick to it and it would get way easier. Somethings might seem hard to implement but that happens in every SDK, once you get how everything works, it is over.
@@kiibati5085 I'll keep learning and practicing Flutter, you're the best
@@glv2690 Mobile development needs you to start with kotlin
if you directly jump to complex topics then it would be difficult
Thank you so much bro, i was struggling with all kind of state handling to solve this issue and i found you video. Great explanation by the way!
Exactly what I need, Thanks buddy. You saved my lot of time.
I would have really loved that first option, it's just so long, but it's a great video, thank you very much man
Much needed tutorial. Thanks man
Congrats, your video has all about my issues, a unique tutorial that comments about pushState... event some errors (i didn't idea) like when press backbutton in android system hardware... and also, you explain very well... thanks, really... your alternatives are quality
Dude - Thank you so much! You saved me hours and I even never would get behind the secret without your video. You are my hero of the day/week/month/year buddy!
Thanks bro!! Amazing content!
I needed this. And by the way cool animation!
Thank you so much, great video
thanks so much !! finally i found it
An amazing video, thanks very much
Thanks bro for your video, I'm glad I found your video, it solved my problem.
I have wasted my 3 days of life to invent what is called in this video DIY and then realized that someone else has already done this before, now it 2 days and I am just crying (wasting again)
tk you, very well explained
Good Article, thanks man :)
This is perfect. But how would I now add a splashscreen to then route to my home page ?
Good work my man.
My favourite example is the iOS CZcams App: a separate and session-persistent navigation stack for each tab.
The question I have is whether each tab is routable. I can’t recall an instance where it was or needed to be.
Amazing video. why can't I use Named routes? Is there any solution for that
thanks man, i think i'll use cupertion because it's look easy
Thank you for the video! Is there something like the Cupertino Solution for Material Apps?
thnx a lot you made my day
Thank you so much!
I tried the third way and have a question regarding the same. How can I pop off all the pushed screen on my first screen while using the cupertino bottom bar!
In DIY method, if I only want keep first page alive, others will reset when switch to other page, can you help me solve it? I'm searched around but found nothing as expected
Nice video! it was very helpful. I decided to go with cupertino. By the way, what is the background music? I really like it.
Hello i came across a problem with this solution, it always loads all the tabs in those navigators at the beginning, it is quite impacting on performance, especially on network calls. I tried keep alive client mixin also. Plese help!
Thanks a lot bro
Awesome video, super useful! One additional use case - what if I wanted the bottom nav bar to not show for certain pages? For example a form page nested within one of these navigator stack where I want the bottom bar to not show, but if the page is popped or submitted then bottom bar to show again?
If someone have the solution i am interested too :)
i have a HomePage with a pageview in the body that contains HomeView, CategoriesView, CartView, i wrap homeView with nagivator but when i press back buttom from physic phone, its close the entire app what is ok cuz its the "back" from the pageview, the homePage, but how i back to HOMEVIEW when i press back button from cellphone?? and not close the entire app
but if I Navigate Screen without Context (Use final GlobalKey navigatorKey = new GlobalKey()) Not Working
i tried the DIY method by following the codes step by step, but why did i encounter a lot of error. help me, im beginner
custom navigator plugin is not working because non-null safety in this plugin
DIY method seems to disable any Hero animations. It needs some improvements. You can solve this by wrapping your nested navigator with a HeroControllerScope and adding this controller.... "controller: MaterialApp.createMaterialHeroController()," Anyhow, my question is as follows; Is there a way I can call the DIY bottom navigator again after setting rootNavigator as true (for Modal Bottom Sheet only to show over Nav bar)?... For example Selecting an option in the modal bottom sheet which navigates to a new route. How do I get the bottom Navigation bar back for this new route, but use root navigator (that is, without bottom navigator) for the bottom sheet only?
THHHHHHHHHHAAANNNKS
i have question, how to navigate to page2 to using a button inside page1, but the bottom navigation index also changed to page2 ?
You just need to use the onTabTapped(index), check line 41 on the app.dart file in github. That is the function used there.
All you are doing is setting the state of the bottom navigation bar index.
Can you make a video how to implement the DYI Solution with the flutter package auto_route?
No guarantees rn but that might happen : )
I really like the first approach. I even used it in my app. However I have a bug. When I press back button from third tab, it is returning to second tab instead of first. I did exactly the same from your github code. Any ideas on how to fix it ? Would be really grateful.
Probably use popandpushednamed for your navigation? Just taking a guess
Cupertino is the hardest to style but at least it has the best functionality lol they should adapt that in material as well tbh
nice video if i want some of the pages keep the state and some reload what should i do?
i look you answer something the same for a comment here and i did it is that good approach?:
Widget _buildOffstageNavigator(String tabItem, {bool keepState = false}) {
if (!keepState) {
return Visibility(
visible: _currentPage == tabItem,
child: TabNavigator(
navigatorKey: _navigatorKeys[tabItem],
tabItem: tabItem,
),
);
} else {
return Offstage(
offstage: _currentPage != tabItem,
child: TabNavigator(
navigatorKey: _navigatorKeys[tabItem],
tabItem: tabItem,
),
);
}
}
@@nadavb1999 Perfecto, That is it
I want to disable or hide bottom navigation bar on few screens of the app using DIY NAVIGATOR SOLUTION. How can I achieve it?
Did you find any solution? 🥲
interesting solution, but has many downsides, especially on the app performance by rebuilding the screen and navigation bar everytime you switch between screens. personally i would use a single screen with one navigation bar and providers for the different lists
please explain me your idea
Hello @Kiibati how about if I dont want to keep the state of pages but just persistent bottom navigation?
I apologize for the late reply. I have not come up with a solution yet but one thing you can do is keep track of your previous and newly selected key or tab. Then in your _selectTab() function you can do this
_navigatorKeys[previousTabItem].currentState.popUntil((route) => route.isFirst);
So basically you are popping the previous tab before going to a new one, basically means you are not keeping the state of that page.
I would think of a better solution or let me know if you have a good idea.
@@kiibati5085 thanks that just pops the pages on the stack but what I want is I have one of the tabs favorites which I want to be refreshed always because user can log out and come back and see his favorites pls tell me if u come up with another solution thanks again.
I'm getting the : Error: The non-abstract class '_CustomNavigatorState' is missing implementations for these members:
Can you help me?
- WidgetsBindingObserver.didPushRouteInformation
Try to either
- provide an implementation,
- inherit an implementation from a superclass or mixin,
- mark the class as abstract, or
- provide a 'noSuchMethod' implementation.
@@berkaycapar I apologize but I cannot tell what the issue is. Can I maybe see some code. Maybe share a snippet?
has many downsides, especially on the app performance by rebuilding the screen and navigation bar everytime you switch between screens.
What if I have a product item on Page 1, that when I click it should go on Details Page, which is located in Page 3 > Details Page
Its hard to explain but the entire idea is that you would need a state management for your navigation.
So wrap your entire app or scaffold with a provider that you can use to control the state of the page. And by doing this you can call the provider from anywhere in the app and change the page you want to be on.
Is there any workaround for make it working with Getx routing management?
brother have you implemented it in Getx please let me know i am facing issue to implement such navbar using GetX
thank you boss.. i was betraying for more than a day.. i got the solution from here
sorry when using the custom navigator package and calling CustomScaffold I get the following error "
Error: The non-abstract class '_CustomNavigatorState' is missing implementations for these members:
- WidgetsBindingObserver.didPushRouteInformation
Try to either
- provide an implementation,
- inherit an implementation from a superclass or mixin,
- mark the class as abstract, or
- provide a 'noSuchMethod' implementation.
class _CustomNavigatorState extends State
Context: 'WidgetsBindingObserver.didPushRouteInformation' is defined here.
Future didPushRouteInformation (RouteInformation routeInformation) {
"
Help me
I am facing the same issue. Someone kindly help. @Kiibati HELPPPP...
same issue facing
How to disable all selected Bottom Nav bar when its not in one any of the bottom nav bar pages?
I am guessing you mean how do you disable the navigation bar. Use this coode
"Navigator.of(context,rootNavigator: true).pushNamed("/list");
"
I have a route setup to use pushNamed or I guess you could also use push
@@kiibati5085 how to disable bottom nav bar for any specific page like login? if i am using above code my nav bar is not showing, any solution ?
I implemented this and works really great, but I do need something extra. Please let me know how to achieve the following.
There are APIs that fire when I go to a page. If that page is on the BottomNavigationBar and I am using your solution for it, then APIs not firing. I want to reload the state of the page whenever I navigate to that page. Your solution gets only the previous state of the page. I want the new and updated state of the page every time I hit that page from BottomNavigationBar. Please help
You can possibly force an api refresh on Navigator.pop(context, true).
So what would happen is that before you push to another page you do something like:
Navigator.push().then(futureOrFunction).
So if you send 'true' on navigator.pop then the previous page knows to fetch data from the api again.
Recap - Push to a page and have a function to handle api reload, then send a data on pop to tell when you want to reload or something.
Hope this helps.
Check this- stackoverflow.com/questions/53652948/flutter-navigator-push-object-issue
Could be cleaner than that tho.
On a second thought I think you might be requesting for something different. To reload a page everytime you click on a navigation for a page.
What you can do is wrap that widget with a visibility widget. What the visibility widget would do is put off that widget(Your page) when you are not on it and rebuild when you navigate to it.
Something like :
Visibility(
visible: currentPageKey == tabItem,
child: TabNavigator(
navigatorKey: navigatorKeys[tabItem],
tabItem: tabItem,
),
);
@@kiibati5085 This one worked. Thanks a lot. I was finding the solution for it from last 9 hours. now I can have a sound sleep. again Thanks a lot.
I need to refresh the data from the tab everytime I enter to it, how can I achive than? It just runs on all tabs when I start the app
What you can do is wrap that widget with a visibility widget. What the visibility widget would do is put off that widget(Your page) when you are not on it and rebuild when you navigate to it.
Something like :
Visibility(
visible: currentPageKey == tabItem,
child: TabNavigator(
navigatorKey: navigatorKeys[tabItem],
tabItem: tabItem,
),
);
Let me know if you need more help
@@kiibati5085 That's exactly what I needed, man, thank you so much for your help, I really appreciate it, I've been struggling with that for like 14 hours trying dumb things, you are a lifesaver, thanks for taking the time give me a hand
project a lot because I've been working on other stuff (and being lazy lol). Also, I had been facing a recurring problem of content dropouts in
How can I open a route in fullScreen like reels or stories on instagram @Kiibati
You want to do something like:
Navigator.of(context, rootNavigator: true).pushNamed("/route"); and
Navigator.of(context, rootNavigator: true).push();
The key to having full screen back is saying that "rootNavigator:true"
Sorry for the late reply.
@@kiibati5085 Perfect, saved me a lot of time. Here wondering why I hadn't thought of using the root navigator. LOL, thanks
Great video!! I tried getting the DIY version to work and after 12hrs I gave up and switched to Cupertino haha.
when i did that the following code stop working
Navigator.of(context).pop());
i need it to make the alert go when click cancel
Now, how to remove Bottom Nav if goto specific page?
Sorry for the late reply, you would have to find a way to switch to a different navigator that does not have the bottom navigation bar. Another hack would be a boolean that you can use to hide the bottom navigation bar.
I would test out this solutions and get back. Let me know if you figure it out before me : )
I am guessing you mean how do you disable the navigation bar. Use this coode
"Navigator.of(context,rootNavigator: true).pushNamed("/list");
"
I have a route setup to use pushNamed or I guess you could also use push
Does the swipe back work if run on ios?
I am not entirely sure what you mean because I usually do not test my apps on IOS. What you can possibly do however is to create the "swipe back" effect using Gesture Detection.
@@kiibati5085 the swipe back feature is created automatically just like how the back button on android is.
Sir may I know the name of background music pllleeeaassssssseeeee pllleeeaassssssseeeee pllleeeaassssssseeeee
Burna Boy x Santan Dave Type Beat "Passionfruit" By RAMOON
@@kiibati5085 yyyessssssssssss yyyaaaaayyyyyyyyyyy thankkkuuuuuuu
Why can't I just add bottom bar to any screen I want ? Make it stateless widget and add to any screen I want
You would be reusing the same code again.
Most likely has more memory footprint since you would be using multiple button navigations for tons of pages and the memory would have to keep it.
It sounds like a bad idea for design.
Probably way harder to manage.
Would probably not work properly. Imagine navigating to a new page and having to keep track of every state you go to and which screen that screen came from and what Icon should be active. It is a crazy nest that no one should deal with.
It might not be a bad idea if the app is really very small and barely nothing. I still say dont do it lol
@@kiibati5085 yeah, I understand, thank you
Doesn't work anymore. Because it doesn't support null safety.
for custom navigator, my solution is using IndexedStack:
IndexedStack(
index: _currentIndex,
children: [CustomNavigator(), CustomNavigator(), ...],
)
Does it works using getx package?
You should be able to implement it using getx since it is all state management.
@@kiibati5085 I tried using Get.to(()=> Screen2()), but didn´t worked.
@@ricard458 I do not have a lot of experience with Getx but I would check it out : )
@@kiibati5085 I am lerning too. If you find the solution please let me know. Thanks
@@ricard458 whats up did you find solution?
This video is really underrated. The explanation is perfect, good pace and everything. I just hope you would either lower the music or shut it down completely. Your voice doesn't mix well with the music and it's very distracting for me.
Two words: null safety.
Never used background music this high, it just loosing the quality of your video. just a suggestion
Do not use the DIY approach - it doesn't work as advertised once you have sub pages and those should also keep the navigation bar!
SO what did you do then? Im working on my final year project and I need help
Your video is so messy! And why did your code not show up errors constantly? I followed every step you did, but there are errors everywhere! For example, the code keep saying the parameter 'key', 'navigatorKey', 'tabItem' cannot have a value of null. How do i solve it????????????