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
Related
I'm using flutter_typeahead: ^4.3.3 package for search bar.
When the onChange event is dispatched, it will call API and show suggestion on that but it's running one keyword behind the actual search and whenever I try to tap on suggestion it will not navigate to next screen.
I had try to navigate on onSuggestionSelected, onTap and suggestionsCallback but it will not navigate to next screen.
The issue you're facing with flutter_typeahead might be due to incorrect implementation of the onSuggestionSelected or onTap event handlers.
To correctly navigate to the next screen, you need to use the Navigator class in Flutter. Here's an example on how to do it using the onSuggestionSelected event handler:
TypeAheadField(
onSuggestionSelected: (suggestion) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => YourNextScreen(suggestion),
),
);
},
// Other TypeAheadField properties and configurations
)
In the code above, YourNextScreen is the widget class for the next screen you want to navigate to. The suggestion argument is the selected suggestion from the suggestions list.
Make sure to pass the appropriate BuildContext to the Navigator and also ensure that you have set up the routing in your Flutter app.
Is it possible to use a separate Navigator in a pop up window? Separate BuildContext?
I have a working app (APP1) and I would like to show it in a new one (APP2) (e.g. on a button press to open the existing app). APP1 has multiple pages.
I was able add the APP1 as an dependency to APP2 and load the main page in a popup dialog (Alert dialog).
The issue happens when I try to navigate through the APP1. If I click on the button in the APP1 it changes the page in the whole new app.
I would like to have separate navigation in the pop up dialog, so that the included app Navigator works only in the pop-up dialog.
What would be a preferred/possible way to achieve this?
Here is a small example:
Soure code
The example consists of 2 apps (APP1 and APP2). APP2 includes APP1 and shows it in a pop up dialog.
You can add a nested Navigator (if you're using Navigator 1.0 in Flutter) by adding the Navigator widget inside your dialog component, that way you manage the navigation of pages within that dialog itself, create nested routes and navigate only within that navigation stack.
You can do something like:
class NestedDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Navigator(
key: <ADD_UNIQUE_KEY>, // add a unique key to refer to this navigator programmatically
initialRoute: '/',
onGenerateRoute: (RouteSettings settings) {
// here you return your own page widgets wrapped
// inside a PageRouteBuilder
}
)
);
}
}
Then you can even use Flutter's own showDialog and load your custom dialog widget like so:
showDialog(context: context,
barrierDismissible: true,
builder: (BuildContext cxt) {
return AlertDialog(
content: NestedDialog()
);
});
Something along those lines. Give that a shot. Here's a Github Gist you can run on DartPad.dev so you can see what I mean. You don't have to create two apps; just distribute your app into two main widgets, and the child pages go under each main widget's child pages; See gist https://gist.github.com/romanejaquez/d769e6e766fbacb2f5c166dd3bceab51. Run it on DartPad.dev.
Image understands you the purpose better
https://i.stack.imgur.com/Z45YH.jpg
I tried everything but failed!
Navigating
Navigating to a new Page is easy
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
"SecoundRoute" is the Widget you will open in a new Window.
More information about this here.
Swipe gesture
This is a bit more complicated. There is a widget called "Dismissible" but like the name say its to dismiss something from a List. There is an issue which suggests to make it possible to avoid deleting the entry from the ListView directly. However, this is inactive. I don't know whether this feature is there or where it is on the priority list.
dismissible
If you use a prebuild and static list of widgets you can maybe get around it, by navigating to the naw page in the onDismissed: callback and using pushReplacement in the rout back. This will case your main page to get Rebuild. Because your Widgets are static I think they will be their again.
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => Page1(),
),
);
flutter_slidable
There is a plugin called flutter_slidable perhaps a solution can be found with this plugin.
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.
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",
));