I am fairly new to state management in Flutter, and I have an application where the user will be interacting with dialogs, and a dialog may have a button to open another dialog which can result in the following:
https://i.stack.imgur.com/VBSzr.png
As shown, multiple issues arise when more than one is opened at once -- most notably the previous dialog is still visible in the background. So when a user opens a new dialog, is there any method where I can hide the dialog behind it, and when the frontmost dialog closes, show the previous one which is hidden? Thanks in advance.
Use Navigator.pop(context); method to close the dialog on your button's onPressed before opening the second dialog.
And then while closing your second dialog you can reopen your previous dialog.
Example:
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Hello World"),
content: Text("This is content"),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context); //Close your current dialog
//TODO:open your second dialog
},
child: Text("Open"))
],
);
});
I would first try to re-think the logic for opening multiple dialogs at the same time.
Maybe there is a quick workaround for that, but if you keep adding more and more dialogs, then it would become a mess.
Since showDialog<T> function returns Future<T?>, you could potentially use await and wait until the first dialog is closed and then open the second one and so on:
bool canContinue = await showDialog<bool>(
context: context,
builder: (context) => YourWidget(),
);
Alternatively, you could pop by using Navigator but as said, this will be visible to the user that something weird is going on (pushing and popping dialogs programatically).
Related
I want to hide the first alert dialog when I call showDialog() from it. After that when I close the second dialog I want the first dialog was visible again. How I can achieve this?
Before you call second dialog, use Navigator.of(context).pop() to close first dialog. Then, in the second one, you have functions then((value) {...}) or whenComplete(() {...}), inside that you can use it to re-open first dialog.
That's strange that you want to close first one, why don't you just leave it alone and let the second lies on it?
You can create common dialog to show data. if its already showing then just update data only.
showDialog return a future and you can pass data from dialog. The concept is here passing some flag to open the second dialog.
onPressed: () async {
final data = await showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: ElevatedButton(
onPressed: () {
Navigator.of(context)
.pop(true); // true for to show second dialog
},
child: Text("open Second dialog"),
),
);
});
if (data == true) {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("Second dialog"),
);
});
}
},
So basically I have a countdown timer for a minute and when the minute finishes I want an alert dialog to pop on the screen for the user e.g:
if (isCompleted) {
//open the dialog widget here
}
I can't find solutions for that. I'm only finding solutions that opens the dialog on button press.
Can anyone help?
I used this in a project of mine to display an info dialog when opening the app for the first time:
Future.delayed(Duration(milliseconds: 500), () {
showDialog(
context: context,
builder: (context) => AlertDialog(
//etc
)
You can probably wrap your widgets in a FutureBuilder (so you have access to context) with your countdown as the future argument, and, when the countdown is over, you can call showDialog from there.
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');
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 the following flow Screen 1 -> Screen 2 -> Dialog (in a separate widget).
Screen 2 displays a dialog (Close? Yes or No). If someone presses Yes, I would like to return to the Screen 1, if they press No, just close the dialog and return to Screen 2. What I currently do is when Yes is tapped, I do Navigator.pop(context) twice. Is this a good practice? Is there a way to pass the context of Screen 2 to my dialog widget so I can pop that one directly?
Personally, I think it would be better to pass the response from the dialog back to the page, and let the page handle the rest.
You can do this:
//I'm using a raised button just to call the alert as an example...
RaisedButton(
child: Text('Press me'),
//This part here is the important part
onPressed: () async {
//You can return anything when you use Navigator.pop
//In this case I'm returning a bool indicating if the page should close or not.
//You have to await this because it depends on user input.
bool shouldPopResult = await showDialog<bool>(
context: context,
builder: (context) => AlertDialog(
//The content of your dialog
actions: <Widget>[
// The value you pass here in Navigator.of(context).pop
// is the value that will be stored in shouldPopResult,
// so if "Yes" is pressed, true will return...
// and if "No", false is returned.
FlatButton(
child: Text('Yes'),
onPressed: () => Navigator.of(context).pop(true),
),
FlatButton(
child: Text('No'),
onPressed: () => Navigator.of(context).pop(false),
)
],
),
);
// This is for if the user dismisses the dialog without pressing a button
// In that case shouldPopResult would be null, so I'm setting it to false.
// You can prevent the user from dismissing the dialog
// setting barrierDismissible to false in the showDialog method.
if (shouldPopResult == null) shouldPopResult = false;
// And finally with the dialog already dismissed, you can decide
// to go back or not.
if (shouldPopResult) Navigator.of(context).pop();
});
As usual you can extract the dialog as a Widget, or extract the function that handles the dialog response altogether or anything else.
You can see the example of returning data from a page in the flutter documentation here.