I've looked through many tutorials for the side nav drawer. I can create one that works fine to lead to different pages. However, when I travel to a page that's different from home, it only gives me the arrow icon to go back to home at the top left instead of keeping the button to bring me back to the side navbar. How can I prevent this?
I can't use the home page to navigate everywhere because it's just supposed to be a blank splash screen.
You can define your drawer in a separate widget file, that you can import everywhere you have a scafold.
I created a package for it because I was missing similar functionality. If you want a Flutter approach for this navigation check out: https://api.flutter.dev/flutter/material/NavigationRail-class.html
Or if you want to have a look at my package: https://pub.dev/packages/side_navigation
It's because you're moving to a new page/Scaffold (probably using Navigator.push()). So, the default button in the AppBar will be the back button.
You can either have the same Drawer in every Scaffold you navigate to, which is not recommended since you'll just keep pushing routes to the navigation stack.
Or, you can change pages within the Scaffold. Check the interactive examples in BottomNavigationBar and NavigationRail to get an idea of how to do it. Basically instead of calling Navigator.push() when a tile in Drawer is tapped, just update the selected index and call setState().
Related
I am trying to create an app that has the following basic setup for navigation:
tab1 -> subpage
tab2
tab3
with a bottom navigation bar for switching between the tabs and each tab having its own navigation stack. Furthermore I would like to add an AppBar with a drawer (as endDrawer) and the back button as leading widget in the AppBar.
The AppBar should be centrally managed so I put it in the main page of the app for maintenance purposes instead of having it on every page that is pushed. The drawer should also be updated later on when the user is logging in or out so it encouraged me more to place the AppBar only in the main page.
Now the issue is that I would like to update the AppBar to contain the back button when the app navigated to the subpage of tab1. Since the AppBar is in the parent I thought of RouteObservers as a possible solution by registering a RouteObserver on each NavigationState.
Yet I cannot get it to work because when I would like to subscribe on the RouteObserver in the HomePage in the didChangeDependencies() the currentState of the NavigatorState does not exist. Also I tried subscribing in the build method after the Scaffold with a flag for subscribing only once, but this didn't work either.
I created a github project with the basics of my current implementation:
https://github.com/S-Braeutigam/bottom-navbar-single-appbar
To get to the current state of code I used the following links:
https://codewithandrea.com/articles/multiple-navigators-bottom-navigation-bar/
https://api.flutter.dev/flutter/widgets/RouteObserver-class.html
Flutter 2.0 appbar back button disappeared if contains endDrawer (The solution gets close to what I would like to implement, but the AppBar should always be visible, not only on the sub page)
My main questions are:
Are RouteObservers the correct approach on how to track the navigation to subpages of tabs and display the back button based on it?
At what lifecycle hook in the main page should or could the subscription on the currentState of each NavigatorState be done? Wasn't able to find any where they are not null.
I'm building a flutter app with persistent bottom navigation bar that contains a menu button.
The menu is supposed to open a drawer from any screen and trough the back button it should close it.
For that I'm using a scaffold including the bottom navigation widget and also the drawer.
This works fine for all screens that are directly accessible trough the bottom navigation bar.
The problem arises if I navigate (I'm using auto_route for routing) to another sub page.
In the sub page it seems that it is not possible to close the drawer.
In the sub page I dont provide a Scaffold since I would have nested scaffolds.
I'm using the WillPopScope and onPop looks like this:
if (Scaffold.of(context).isEndDrawerOpen) {
Navigator.of(context).pop();
Unfortunately this just pops the sub page while the drawer stays open.
One solution would be to pass a closing function to every child screen (or something like a global key for the global scaffold) but I would appreciate a more elegant solution
Do you have any idea how I can fix that?
Thanks in advance!
I'm looking for a way to update the backgroundColor of the BottomNavigationBar when the user taps on a button. The problem here is the BottomNavigationBar aren't in the same file as the button. My application is divided into two files. The first file, main.dart, includes a StatefulWidget with a BottomNavigationBar. The other file, home.dart, has a StatefulWidget too with a button. The question is how to update the BottomNavigationBar when the user tapping on the button? Basically with calling setState() everything is fine, but as I said the BottomNavigationBar is located in an other file. I've absolutely no idea and I'm not sure if this is even possible.
I added no code because I'm not really asking for code snippets but rather food for thought or explanations what I can do.
Make your bottom navigation bar file as Stateless shown in this dart pad example
Example on Github
In this on click of press button color of bottom navigation bar changes
Let me know if it work out or not for you.
In my app, the navigation bar works fine between the tabs, but when I go inside of each item in my list, I want the navigation bar to be there too.
What I did is that I made it a separate widget, and called in the bottomNavigationBar inside the Scaffold of the pages, but the problem is that I am changing the state of the navigation bar in my main page only, so the state doesn't get distributed across all pages in my app.
How do I make the body of the page change in an app where there is not only one body, but many?
Thanks!
Since there is not code over here in your post and I don't know what you have done so far so I can only advise you to go through this post.
I know you might have already seen this, but still, try to follow and this will really help.
Thanks....!!!!!!
https://medium.com/#lucassaltoncardinali/keeping-state-with-the-bottom-navigation-bar-in-flutter-69e4168878e1
I'm asking how to disable Overlays to move when a Scaffold.of(context).showSnackBar is called like on my video below.
The same thing is happening when the keyboard appear. Sometime the blue floattingButton (+) don't come back to it's original position :-(
Thx in advance.
Problem animation
The FloatingActionButton going up when the Scaffold is displayed is something common to all default implementations.
Give a look to the "Bootom app bar" demo in the Gallery app. Press on the search button and you will see it coming up. Or just add a Scaffold to the app that is built with flutter create command.
This happens because of the way the FAB button is placed on the screen and the effect of displaying the Snackbar by the Scaffold.
The FAB button is displayed at the bottom of the content area of the Scaffold content. When the content area is shrinked to include the BottomAppBar, the FAB goes up with it. It has nothing to do with Overlay.
You have two options:
Either you create your own versión of the FAB which is not
controlled by the Scaffold.
Or you hack the Scaffold so the size of the SnackBar is not taken
into account.
For this second option you can try the following:
Go to the file /lib/src/material/scaffold.dart in your flutter installation and look for the line with the code snackBarSize: snackBarSize, inside the _ScaffoldLayout class.
Replace it with snackBarSize: Size(0.0, 0.0),
You will see that the FAB stays in its place.