I have a main page with 3 tabs where I can navigate between them via
_tabController.jumpToPage(tab);
but when I open new screen form tab
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TrainerListPage())
);
I can't make navigation between tabs until screen is open and I have to do something like this:
Navigator.pop(context);
tabStorage.tabController.jumpToPage(0);
where tabStorage is my class for keeping ref to PageController instance
If I will have 3 opened screen in order I have to call
Navigator.pop(context)
three times and it has at least visual defect.
What is correct way to active it?
Related
I am having fours pages with no tab bars If I want to click mobile phone back button to go the previous page. I didn't any solution to do it.
wrap your Scaffold with WillPopScop, onWillPop property will help you controll it as you like.
return new WillPopScope(
onWillPop: (){
Navigator.pushReplacement(context,
new MaterialPageRoute(builder: (context) => MyHomePage()));
},
child : Scaffold( child : Center(child : Text('welcome to page 2 press back button to return to page 1 ') ),);
i think flutter mange default when user press back button remove screen.then you can try this..
Navigator.pop(context);
more information refer this link..
https://medium.com/flutterpub/my-flutter-path-003-navigator-ad1472ff4e1a
why pages get duplicated when pushed with Navigator?
I want to switch between pages but always a new instance is created.I don't want to replace or pop ... is there a way to switch pages in Navigator if it is already open in Navigator. we have different routes and we want to switch between pages if it is already in the stack. below is an example to illustrate the issue:
Navigator.pushNamed(context, '/home');
Navigator.pushNamed(context, '/register');
Navigator.pushNamed(context, '/about');
I searched everywhere and could not come up with an answer.
I have a BottomNavigationBar and a FloatingActionButton.
What I am trying to do is pushing a full screen page when the user presses the FloatingActionButton.
This page needs to cover the area of the BottomNavigationBar and previous AppBar since in this new page user is not allowed to go to the other tabs of the BottomNavigationBar.
I came across fullscreenDialog, a property of PageRoute Widget class and got excited but could not get it to exactly work as I wanted it to work(top<->bottom as I will explain later)
This page will have it's own Scaffold and AppBar and is able to push/pop to next screens(inside of it's own navigation tree)
In order to pop this page, the user will press a 'x' button positioned at bottom center of the page.
I want to push/pop this new Page from top<->bottom instead of the usual navigation style which is left<->right (For iOS/Cupertino)
I am familiar with this type of UI from iOS devices(ModalViewController)
So How would we implement the push and pop commands?
Or is there another, better/recommended way to do this?
I had a similar problem, and it was solved with this:
await Navigator.of(context, rootNavigator:true).push( // ensures fullscreen
CupertinoPageRoute(
builder: (BuildContext context) {
return MyWidget();
}
) );
Found at https://stackoverflow.com/a/54017488/247451
You should try MaterialPageRoute with fullscreenDialog prop (docs):
Navigator.of(context).push(new MaterialPageRoute<Null>(
builder: (BuildContext context) {
return new AddEntryDialog();
},
fullscreenDialog: true
));
Might not be the best way in your case, but it will appear above the bottom bar and any other navigation widgets.
Code taken from: https://marcinszalek.pl/flutter/flutter-fullscreendialog-tutorial-weighttracker-ii/
I have a list of ListTile and whenever I tapped them, a new page will appear. Currently, the new page will slide up (when appearing) and slide down (when removed). I wanted to change the transition animation to Fade.
I've read the solution of that in here then I edited the code from the link and here is the result.
class MyCustomRoute<T> extends MaterialPageRoute<T> {
MyCustomRoute({ WidgetBuilder builder})
: super(builder: builder);
#override
Widget buildTransitions(BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child) {
if (settings.isInitialRoute)
return child;
return new FadeTransition(opacity: animation, child: child);
}
}
The only difference from the link's solution to mine was that I never supplied the "settings" variable to the MaterialPageRoute class.
And here is the part of the code where I've used the Navigator.push:
new ListTile(
onTap: (){
Navigator.push(context, new MyCustomRoute(builder: (context) => new SecondPage("someTitle", "someDescription") ));
},
//The rest of the code goes here
I've tried to run this code and I've never expected that this will run smoothly since I never provided the settings variable to the MaterialPageRoute widget but it ran perfectly.
My question is, is this the right way to do it? or
Should I provide settings for the MaterialPageRoute class?
And also since I didn't provide a settings variable for the MaterialPageRoute class, where did it get its settings? In this part of the code:
if (settings.isInitialRoute)
return child;
I would appreciate any enlightment. Thanks in advance.
The settings are only meant for two things - specifying the name, and letting the route know whether it's the first page to be opened.
The isInitialRoute simply tells the route whether it's the first page to be opened; this is important because you don't want a slide up animation on the very first page.
Since it seems your Custom Route is really only used after the first page, you don't need to worry about this. So you're probably fine ignoring the settings, unless you start to use the page as your first page (and even then, fading in might not be the worst thing).
I have the following drawer. it works as it should as long as i only want to hop between the widgets of my main drawer items.
Navigation with drawer
but inside those widgets i want to route to a new one, with a button click for example, while the drawer stays in my corner. So basically is there any way to reproduce a sticky android drawer in flutter ?
Drawer is a Scaffold property.
So when you go to another page you will normally have another Scaffold widget with its own Drawerand the previous one will be disposed.
In the new page you need to create and display the Drawer for this Scaffold but you can't keep the previous one in the corner.
Since the two widgets are independent of each other, you cannot use the same exact Drawer in the second widget.
Either you can create the exact copy of that Drawer in second one and open it on initState method or if possible instead of switching to the second, you can make the second widget as a subview inside firstWidget.