Keep Bottom Navigation Bar across Page Route [Flutter]

Рет қаралды 82,456

4 жыл бұрын

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

Пікірлер: 140

@jrheisler 4 жыл бұрын

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!

@kiibati5085 4 жыл бұрын

I watch his videos and read he's article. He is definitely talented. Thanks for the comment and for watching my video. : )

@sa1998ba 3 жыл бұрын

Man!!!!!! thankyou so much, the cupertinoTab is sooooo easy to deal with and much satisfying!!

@alimodz6253 3 жыл бұрын

Awesome video man.. Finally someone making a video about how to actually deal with this weird navigation bar across different scaffolds

@rohittp1585 4 жыл бұрын

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 !

@fabiolucasdev 3 жыл бұрын

Tanks man, I use Cupertino because it is super simple and keep alive the instances. Very, very good explanation.

@m.shehryar5341 4 жыл бұрын

Best video so far. Exactly what i was looking for. Thank you so much you saved me so much headache ❤️

@yourfavedev4954 2 жыл бұрын

I would have really loved that first option, it's just so long, but it's a great video, thank you very much man

@JuanDavidDiazDuran 3 жыл бұрын

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

@juliano4829 2 жыл бұрын

What about when you use the drawer? Wich globalkey should you use? Thanks.

@androidtechmayn2633 2 жыл бұрын

Damn, i was stuck at this for ages.

@Paco-pq7mt 2 жыл бұрын

Thanks man! But do you know how i can come back from this new page and show again my navigation bar?

@patriciamariegarcia7208 2 жыл бұрын

I'm new to flutter. Which part is this placed? I cant find the Navigator.push portion in the source code

@Sygrain 2 жыл бұрын

thanks! it was really helpful

@elhadjbabacarcisse2868 2 жыл бұрын

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!

@_levyathan_ 3 жыл бұрын

I will be honest, I am new to flutter, and developing and learning it is most of the time is so exhausting mentaly

@glv2690 3 жыл бұрын

I feel the same way, I think Flutter makes things more complicated than it should be, just my opinion

@kiibati5085 3 жыл бұрын

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

@glv2690 3 жыл бұрын

@@kiibati5085 I'll keep learning and practicing Flutter, you're the best

@mrmusanda3576 2 жыл бұрын

@@glv2690 Mobile development needs you to start with kotlin

@shivmsahu115 2 жыл бұрын

if you directly jump to complex topics then it would be difficult

@AbdolHussain 3 жыл бұрын

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)

@deepharman7600 Жыл бұрын

Exactly what I need, Thanks buddy. You saved my lot of time.

@lakshminarayanans1066 2 жыл бұрын

Much needed tutorial. Thanks man

@tibfox 3 жыл бұрын

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!

@nsptech9773 3 жыл бұрын

I needed this. And by the way cool animation!

@lucasramos6173 Ай бұрын

Thanks bro!! Amazing content!

@chavode10 3 жыл бұрын

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

@NurFlutterDev Жыл бұрын

Thanks bro for your video, I'm glad I found your video, it solved my problem.

@ssoss8304 3 жыл бұрын

thanks so much !! finally i found it

@yowandafriskya.1502 Жыл бұрын

Good Article, thanks man :)

@androidtechmayn2633 2 жыл бұрын

Good work my man.

@sergiofranklin8809 3 жыл бұрын

Thank you so much, great video

@noursalman932 Жыл бұрын

An amazing video, thanks very much

@gilangs8484 3 жыл бұрын

thanks man, i think i'll use cupertion because it's look easy

@augustoeduardo209 4 жыл бұрын

tk you, very well explained

@aladdinsaidi8312 3 жыл бұрын

thnx a lot you made my day

@guioliveira9271 2 жыл бұрын

Thank you so much!

@huguesbomo9297 3 жыл бұрын

Thanks a lot bro

@dipinsonwani4029 3 жыл бұрын

Amazing video. why can't I use Named routes? Is there any solution for that

@tillschickle2593 3 ай бұрын

Thank you for the video! Is there something like the Cupertino Solution for Material Apps?

@1wisestein 3 жыл бұрын

My favourite example is the iOS KZfaq 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.

@ddwsc_xv 2 жыл бұрын

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

@jabedamin6052 3 жыл бұрын

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?

@Paco-pq7mt 2 жыл бұрын

If someone have the solution i am interested too :)

@jeff5858 3 жыл бұрын

This is perfect. But how would I now add a splashscreen to then route to my home page ?

@aloksingh4244 Жыл бұрын

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!

@hafeez-rana Жыл бұрын

thank you boss.. i was betraying for more than a day.. i got the solution from here

@kensukeishii6858 3 жыл бұрын

Nice video! it was very helpful. I decided to go with cupertino. By the way, what is the background music? I really like it.

@sarerusoldone 2 жыл бұрын

Cupertino is the hardest to style but at least it has the best functionality lol they should adapt that in material as well tbh

@almahaalka2677 Жыл бұрын

THHHHHHHHHHAAANNNKS

@thesaugatt 3 жыл бұрын

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!

@David-fk9qj 3 жыл бұрын

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

@fikribasa874 3 жыл бұрын

i have question, how to navigate to page2 to using a button inside page1, but the bottom navigation index also changed to page2 ?

@kiibati5085 3 жыл бұрын

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.

@simontai3900 3 жыл бұрын

for custom navigator, my solution is using IndexedStack: IndexedStack( index: _currentIndex, children: [CustomNavigator(), CustomNavigator(), ...], )

@rekaiadraoui4060 3 жыл бұрын

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

@sensornyy 2 жыл бұрын

please explain me your idea

@nabilizzat5300 Жыл бұрын

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

@berkaycapar 3 жыл бұрын

I'm getting the : Error: The non-abstract class '_CustomNavigatorState' is missing implementations for these members: Can you help me?

@berkaycapar 3 жыл бұрын

- 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.

@kiibati5085 3 жыл бұрын

@@berkaycapar I apologize but I cannot tell what the issue is. Can I maybe see some code. Maybe share a snippet?

@goodgenix9583 3 жыл бұрын

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.

@hearvie 3 жыл бұрын

Probably use popandpushednamed for your navigation? Just taking a guess

@nirbhaysrivastava902 Жыл бұрын

but if I Navigate Screen without Context (Use final GlobalKey navigatorKey = new GlobalKey()) Not Working

@Add0w 3 жыл бұрын

Hello @Kiibati how about if I dont want to keep the state of pages but just persistent bottom navigation?

@kiibati5085 3 жыл бұрын

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.

@Add0w 3 жыл бұрын

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

@nadavb1999 3 жыл бұрын

nice video if i want some of the pages keep the state and some reload what should i do?

@nadavb1999 3 жыл бұрын

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, ), ); } }

@kiibati5085 3 жыл бұрын

@@nadavb1999 Perfecto, That is it

@kuberanb9536 Жыл бұрын

custom navigator plugin is not working because non-null safety in this plugin

@Socram2795 3 жыл бұрын

Can you make a video how to implement the DYI Solution with the flutter package auto_route?

@kiibati5085 3 жыл бұрын

No guarantees rn but that might happen : )

@arminkh4553 2 жыл бұрын

Is there any workaround for make it working with Getx routing management?

@user-ho4qi9sc3r 3 ай бұрын

brother have you implemented it in Getx please let me know i am facing issue to implement such navbar using GetX

@markdioneeb8997 2 жыл бұрын

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

@kiibati5085 2 жыл бұрын

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.

@funon2313 3 жыл бұрын

I want to disable or hide bottom navigation bar on few screens of the app using DIY NAVIGATOR SOLUTION. How can I achieve it?

@creotove 2 ай бұрын

Did you find any solution? 🥲

@speedy_o0538 3 жыл бұрын

Great video!! I tried getting the DIY version to work and after 12hrs I gave up and switched to Cupertino haha.

@Daniel-H2 3 жыл бұрын

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

@coolpepe123 3 жыл бұрын

I am facing the same issue. Someone kindly help. @Kiibati HELPPPP...

@smamahsn2275 3 жыл бұрын

same issue facing

@mrripp3r 2 жыл бұрын

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?

@arvingabrieltrinidad2029 2 жыл бұрын

has many downsides, especially on the app performance by rebuilding the screen and navigation bar everytime you switch between screens.

@glv2690 3 жыл бұрын

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

@kiibati5085 3 жыл бұрын

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

@glv2690 3 жыл бұрын

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

@ishmaelebiasah3796 Жыл бұрын

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

@tusharugale3849 3 жыл бұрын

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

@kiibati5085 3 жыл бұрын

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.

@kiibati5085 3 жыл бұрын

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, ), );

@tusharugale3849 3 жыл бұрын

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

@marufhassan634 3 жыл бұрын

How to disable all selected Bottom Nav bar when its not in one any of the bottom nav bar pages?

@kiibati5085 3 жыл бұрын

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

@devkumar-vj6of 3 жыл бұрын

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

@Yayaloy9 3 жыл бұрын

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.

@bihireboris3407 3 жыл бұрын

How can I open a route in fullScreen like reels or stories on instagram @Kiibati

@kiibati5085 3 жыл бұрын

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.

@mrripp3r 2 жыл бұрын

@@kiibati5085 Perfect, saved me a lot of time. Here wondering why I hadn't thought of using the root navigator. LOL, thanks

@kishon2810 3 жыл бұрын

Does the swipe back work if run on ios?

@kiibati5085 3 жыл бұрын

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.

@hearvie 3 жыл бұрын

@@kiibati5085 the swipe back feature is created automatically just like how the back button on android is.

@prsh1989 3 жыл бұрын

Sir may I know the name of background music pllleeeaassssssseeeee pllleeeaassssssseeeee pllleeeaassssssseeeee

@kiibati5085 3 жыл бұрын

Burna Boy x Santan Dave Type Beat "Passionfruit" By RAMOON

@prsh1989 3 жыл бұрын

@@kiibati5085 yyyessssssssssss yyyaaaaayyyyyyyyyyy thankkkuuuuuuu

@indrawow4071 4 жыл бұрын

Now, how to remove Bottom Nav if goto specific page?

@kiibati5085 4 жыл бұрын

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 : )

@kiibati5085 3 жыл бұрын

@chetankhanna8975 3 жыл бұрын

Why can't I just add bottom bar to any screen I want ? Make it stateless widget and add to any screen I want

@kiibati5085 3 жыл бұрын

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.

@kiibati5085 3 жыл бұрын

It might not be a bad idea if the app is really very small and barely nothing. I still say dont do it lol

@chetankhanna8975 3 жыл бұрын

@@kiibati5085 yeah, I understand, thank you

@ricard458 3 жыл бұрын

Does it works using getx package?

@kiibati5085 2 жыл бұрын

You should be able to implement it using getx since it is all state management.

@ricard458 2 жыл бұрын

@@kiibati5085 I tried using Get.to(()=> Screen2()), but didn´t worked.

@kiibati5085 2 жыл бұрын

@@ricard458 I do not have a lot of experience with Getx but I would check it out : )

@ricard458 2 жыл бұрын

@@kiibati5085 I am lerning too. If you find the solution please let me know. Thanks

@arminkh4553 2 жыл бұрын

@@ricard458 whats up did you find solution?

@shubham_indalkar Жыл бұрын

Doesn't work anymore. Because it doesn't support null safety.

@DokInT1 6 ай бұрын

Two words: null safety.

@triplexSch 3 жыл бұрын

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!

@hearvie 3 жыл бұрын

SO what did you do then? Im working on my final year project and I need help

@tejasgaikwad7271 Жыл бұрын

Never used background music this high, it just loosing the quality of your video. just a suggestion

@aloysius7959 Жыл бұрын

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