When I press the device back button, it navigate to the homepage but not to the previous page.
I would like to know how to navigate to the previous page using the the device back button.
Thank you
You might have used Navigator.pushReplacement which destroys the previous page and creates the new page.However if you use Navigator.push pressing the back button will navigate you to the previous screen.
Example:
Container(
child: Center(
child: TextButton(child: Text("Next page"),onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => Page2(),)); // back button will navigate to previous screen
//Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => Page2(),)); // back button will not navigate to previous page
},),),),
It was a Materialapp widget problem.
I solved the problem by deleting the Materialapp widget that was in one of the pages.
This occurs because the previous navigation was not saved in the route stack.
What you should do is this:
Widget A
Navigator.push(context, WidgetB());
Inside Widget B, press the device button and you will return to widget A.
It is important that in widget A you are not using replacement or another that removes widget A from the stack.
You can use:
Navigator.pop(context);
or
Navigator.pushNamed(context, '/routeName');
Related
I have a list of Screens in a custom drawer.
Screen 1,
Screen 2,
Screen 3
What is the proper way of navigating from Screen 1 to Screen 2 on push of a button. Currently, I am losing the hamburger (the drawer button) option when I push or push replace.
The code I have was not written by me and I do not have access to the person who wrote the code.
Any thoughts?
Just use the standard navigation:
TextButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => Screen2()));
}
child:
//child goes here
)
In my app, I have a homepage that has 5 tabs on the bottom. On each tabbed page, there is an app bar that has a '+' symbol as an action, which navigates you to a different page. The navigation with that '+' button to the new page is done with the following code, alongside the Flutter Platform Widgets package:
Navigator.of(context, rootNavigator: true)
.push(
platformPageRoute(
context: context,
builder: (context) => Page1(),
),
);
I use the platformPageRoute feature as an easy way to navigate with a native feel. Now, that works fine to navigate to a new page, but the issue comes when I use
Navigator.pop(context);
to navigate back to the original page. When I use that to navigate back to that original page, it pays no attention to the tab that was selected originally. For example, if I were originally on the second tab on the homepage and then use the '+' button on that tab and then finally use
Navigator.pop(context);
on that new page, it returns the first tab of the homepage. Is there any way of ensuring when I use the above command, it goes to the right tab? I have tried something along the lines of:
Navigator.popUntil(context, '/homepageTab2');
alongside a named route, to return to the correct tab on the homepage, although that returns a black screen. Why might that be? I have also tried using:
Navigator.pushAndRemoveUntil(
context,
platformPageRoute(
context: context,
builder: (context) =>
HomePage(selectedPage: 1),
),
(route) => false,
);
This does not work either, since it returns the selected/correct page tab content, but with the first tab selected. In addition, the other
'problem' for me is that the animation is a 'push' one and that doesn't 'match' with the animation when I have more often used
Navigator.pop(context);
to navigate back to a screen. Is there a way to maybe use pushAndRemoveUntil but then change the animation to match a pop animation?
Thanks!
EDIT:
I have just noticed that with the situation I have described above, it is actually returning the correct screen content when I use Navigator.pop(context); but the tab in the tab bar at the bottom is showing as the first tab, in the second tab's position, essentially duplicating the first tab, until I navigate to a new tab and back, at which time it shows the correct tab in the correct position. I hope that makes sense!
As it turns out, the issue wasn't related to Navigator.pop(context); being used. It was the way I was controlling the selected tab. I'm posting this as an answer incase it helps someone else.
Initially, I created late values for a tab controller and the current selected page, like so:
late TabController _tabController;
late ScrollController _scrollController;
late int _selectedPage;
Then, I created a list of widgets that represented the actual page to display for each selected tab:
List<Widget> _pageWidgets = <Widget>[
Page1();
Page2();
Page3();
Page4();
Page5();
];
Then (and I think this was the bit that wasn't working) I used initState() as follows:
void initState() {
super.initState();
// Initialising a value that allows the 'final' page selector to be changed
_selectedPage = widget.selectedPage;
// Initialising the tab controller
_tabController = TabController(
length: 5,
vsync: this,
initialIndex: _selectedPage,
);
// updating the tab index when a new item is selected
_tabController.addListener(() {
setState(() {
_selectedPage = _tabController.index;
//_tabIndex = _tabController.index;
});
});
// Creating the scroll controller
_scrollViewController = ScrollController();
// Scrolling view to top when a new tab is selected
_tabController.addListener(() {
setState(() {
_scrollViewController
.jumpTo(_scrollViewController.position.minScrollExtent);
});
});
}
I then controlled the page content like this:
body: _pageWidgets.elementAt(_selectedPage),
I'm not 100% sure why this wasn't working, although I believe it would have something to do with the fact that initState() would only be called during the build and therefore placing the functionality inside there would mean changes wouldn't be detected. Either way, my new method, which works perfectly, is:
/// Controls the screen to display first
int _index = 0;
/// Creating a navigation key to control tab bar navigation
final _navigationKey = GlobalKey<CurvedNavigationBarState>();
Then, within the Scaffold() I show the page content like this:
body: _pageWidgets.elementAt(_index),
And finally, within the navigation bar (which is the CurvedNavigationBar() package from pub.dev) I give it a key and the index:
key: _navigationKey,
index: _index,
And this controls it perfectly, showing the correct tab.
Sub-pages of a TabBarView cannot be navigated using Navigator.
You can use TabController to go to your desired tab page after awaiting Navigator.push():
await Navigator.of(context, rootNavigator: true)
.push(
platformPageRoute(
context: context,
builder: (context) => Page1(),
),
);
tabController.animateTo(<index of tab>);
I try to build a flutter app and want to navigate trough the pages.
I build a drawer with a menu with several items to open new pages - that works fine.
onTap: () {
Navigator.of(context).pop();
Navigator.push(
context,
new MaterialPageRoute(
builder: (BuildContext context) => new Page1(),
),
);
},
By pressing on the Page1 menuitem page1 opens fine.
Inside page1 I have a slidable list with "edit" and "details". I open this with
onTap: () {
Navigator.of(context).pop();
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => new DetailsPage(),
),
);
},
In the details Page I see all the things i wanna see, but when I press the Back button in the appBar i am back at home screen with closed drawer.
I tried to put onPressed: () => Navigator.pop(context); inside the appBar section but this doesn´t work either.
Now I got what I want by using always Navigator.push but I am sure that this is not right, so that navigator stack gets bigger and bigger.
What I do wrong? Why .pop does not bring me to the last page?
Any ideas?
Thx in advance
Patrick
Just remove the line with the Navigator.of(context).pop();in the Page1 onTap.
you can use pushReplacement in any cases you need to remove current page from stack and route to new page.
Replace the current route of the navigator that most tightly encloses
the given context by pushing the given route and then disposing the
previous route once the new route has finished animating in.
here is the documentation
i have app with two screens,one fingerprint screen and another home screen.once
fingerprint is authenticated i will get routed to home screen(using navigator.push()),but if I click back button in phone now it is getting routed to fingerprint screen again.Now how to close the app instead of routing back to finger print screen?
Use Navigator.pushReplacement. It will replace the current topmost widget on the stack with the new one instead of simply pushing it on top.
Example usage -
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (BuildContext context) => MyHomePage()));
More documentation about this method can be found here.
put your homepage scaffold inside WillPopScope as a child
WillPopScope(
child: Scaffold(...),
onWillPop: () async {
return false;
},
),
I want my flutter app to navigate from my last screen back to the home page. Currently, it navigates back to the previous page which I do not want.
onPressed: () {
Navigator.pop(context, MaterialPageRoute(builder: (context) => MyHomePage()));
},
I expect the button to return me back to the Home Page
If you don't use named routes you can simply replace your code with this:
onPressed: () {
Navigator.of(context).popUntil((route) => route.isFirst);
},
This will pop the navigation stack until it reaches the first item which might be your home page.
Can't you just use Navigator.pushAndReplace(MaterialPageRoute(builder: (context) => MyHomePage())); for navigation back to the home page?