I am having trouble launching new screen widget. I have main.dart where I am using bottomNavigationBar and body for ViewPager UI. Now I have 3 bottom tabs and when I go to 2nd tab's view and click on a button to launch another screen/view using:
onTap: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ViewMyContactList(),
),
)
the new screen replaces the 2nd tab's view, when I go to 3rd tab then come back to 2nd tab, the new screen is gone and 2nd tab's initial screen is back. Also when new screen replaces the 2nd screen's initial view and when I do system back press in Android, the app exits straightaway.
You are trying to do Multiple Navigators with BottomNavigationBar
You can reference this doc for detail https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf
Each tab must keep it'own Page Route, you can use the demo code in doc or
You can use the following two package to help you
https://pub.dev/packages/multi_navigator_bottom_bar
Helps you to build multi-navigator bottom navigation bar more easily.
https://pub.dev/packages/nested_navigators Flutter widget for implementing multiple nested navigators with their own route stacks.
Related
Let say i have three screens: wallet, payments, add card. I want to pop payments screen from stack when i'm on add card screen and navigate it to wallet screen without using navigator.push on click on icon plus the back icon of device.
here is the flow of screen:
wallet screen has a button which navigate to the payments screen, then payments screen has a button which navigate to the add card screen . So, now i want when i am on add card screen and click on back icon of android or the icon which is on add card screen both should navigate to wallet screen.
Please help how to do this.
It's not very clear from your question how your navigation stack should look: Is payments first in the stack, and can you go from there to add card and wallet? Or should only one exist?
I think you can use pushReplacement: https://api.flutter.dev/flutter/widgets/Navigator/pushReplacement.html
That way, it'll automatically replace the current route with the new one, and your back button will simply close the app (or go back to the screen before it). If you want some custom behavior when the back button is pressed, you can always use a WillPopScope: https://api.flutter.dev/flutter/widgets/WillPopScope-class.html
Navigator.removeRoute(context, MaterialPageRoute(builder: (context) => payments()));
use this code when you remove your payments screen
Please try this below code
PopAndPushNamed ->
Pop the current route off the navigator that most tightly encloses the given context and push a named route in its place.
It pops payments screen from the navigation stack and only wallet screen remains in Navigation stack
Navigator.popAndPushNamed(context, '/addCard');
PushNamedAndRemoveUntil ->
It pushes the route with the given name (Wallets) onto the navigator, and then remove all the previous routes until the predicate returns true. Here it is using a RoutePredicate that always returns false (Route route) => false. In this situation it removes all of the routes except for the wallets route pushed.
//named
Navigator.of(context)
.pushNamedAndRemoveUntil('\wallets', (Route<dynamic> route) => false);
//not named
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) =>
Wallets()), (Route<dynamic> route) => false),
PopUntil ->
Calls pop repeatedly on the navigator that most tightly encloses the given context until the predicate returns true.
The predicate may be applied to the same route more than once if Route.willHandlePopInternally is true.
To pop until a route with a certain name, use the RoutePredicate returned from ModalRoute.withName.
Navigator.popUntil(context, ModalRoute.withName('/wallets'));
try this:
Navigator.pushReplacement()
I am currently using persistent_bottom_nav_bar: ^4.0.2 package of flutter which showing 3 screens (A,B,C screens) in the bottom tab navigator. In the first screen I have a button that navigate user to another screen (D screen). The problem is the bottom tab navigator (persistent_bottom_nav_bar) is still showing in D screen, while the main screens are AB,C. Is there a way to hide persistent_bottom_nav_bar when the screen is not one of three main screen ?
can you check persistent_bottom_nav_bar in example code.
onScreenHideButtonPressed: () {
setState(() {
_hideNavBar = !_hideNavBar;
});
},
I think there is a nice feature that comes with the plugin itself (check out the documentation on pub.dev here https://pub.dev/packages/persistent_bottom_nav_bar, it's allowed you to navigate to a new screen without the navbar and when you pop back the navbar will show
try this
PersistentNavBarNavigator.sepushNewScreen();
there are some parameters that are required "screen & context" which is the screen you want to navigate to.
the parameter "withNavBar" it's a bool (optional) when you pass false the navbar will not show on the new screen!
you could try this after importing
PersistentNavBarNavigator.pushNewScreen(
context,
screen: newScreen(),
withNavBar: false,
);
I am using the Cupertino tab to display a bottom navigation bar and it working good. Now, I want to route to a new page from one of the tab pages (E.g login)and not have the bottom navigation. I tried the code below and I still see the bottom navigation.
How can I route to a page and not show the bottom navigation
Navigator.push(
context,
CupertinoPageRoute<void>(
title: "login",
builder: (BuildContext context) => LoginScreen(),
),
);
The static methods on Navigator, like Navigator.push or Navigator.of use the nearest enclosing Navigator of the context argument. When using a CupertinoTabScaffold, every tab has a nested Navigator to provide in-tab navigation, as is the default iOS behavior. You can get the root Navigator using Navigator.of(context, rootNavigator: true) and push your route on that:
Navigator.of(context, rootNavigator: true).push(route)
More info about navigators in the docs
I'm creating my first app in flutter, and i'm having issues with state management. I have a MainPage.dart with BottomNavigationBar, and body: with tabPages[MainTab, ...]. In the MainTab i have a ListView, and when i click ListView item, it should open details, however BottomNavigationBar shouldn't be removed.
Below i have a design.(I'm using Scoped Model).
I tried these solutions
https://gist.github.com/HansMuller/0e76c54b1f2d4423efbdc2c185e761ef and How to route to page, without removing BottomNavigationBar in flutter?
But in those cases, i can't route to page without bottom navigation. When i click on FLoatingActionButton: it should open new page without bottom navigation (BottomNavigationBar stay always at the bottom, even if i don't want it)
https://medium.com/#daniyargilimov/lutter-bottomnavigationbar-with-multiple-navigators-725ff013489c
here is the working example...
I'm running the Flutter Gallery example from Google:
https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/cupertino/cupertino_navigation_demo.dart
In the gif below, notice how when I navigate from one screen to the next, the Cupertino Tab Bar stays at the bottom of the screen.
The reason why this is the case is that it is a widget that lays within the parent widget CupertinoNavigationDemo and while the tabs are swapped in and out of the view, the tab bar remains.
Is there a way to get rid of the Tab Bar when navigating?
set rootNavigator: true
Navigator.of(context, rootNavigator: true).push(MaterialPageRoute(
builder: (context) => "your new routes",
));