I am developing an app that mainly just displays information from a web service to the user (info created by their admin). On the Drawer Menu there are 5 screens to display different information.
After the user has logged in, I use Navigator to move between screens by using pushReplacement. Meaning the current screen is always at the bottom of the screen stack. If the user presses the back button on their device, the app exists immediately.
How can I catch this, so I can ask the user if they want to log out, and then display the login screen?
Thanks for any suggestions.
Cheers,
Paul
You can do this with the WillPopScope widget and changing the onWillPop parameter. The example I posted does something similar to what you want as it shows an alert dialog that can determine what will happen next. The FlatButton onPressed code probably isn't exactly what you're looking for and you'll have to handle that according to your implementation This is the example code is from #AironTark answer to this related question.
#override
Widget build(BuildContext context) {
return WillPopScope(
child: Scaffold(...),
onWillPop: () => showDialog<bool>(
context: context,
builder: (c) => AlertDialog(
title: Text('Warning'),
content: Text('Do you really want to exit'),
actions: [
FlatButton(
child: Text('Yes'),
onPressed: () => Navigator.pop(c, true),
),
FlatButton(
child: Text('No'),
onPressed: () => Navigator.pop(c, false),
),
],
),
),
);
}
Related
I'm new to flutter and I'm Having a problem with Navigator , I don't know why it doesn't show back button on the next page (i want to show a back button on the next page app bar) when I use Navigator.push even though I have seen a lot of videos that show the opposite, maybe someone will have the answer here
here's the code I'm Using:
In the appbar there is leading property...
In that leading property you can use any Widget. As your requirement you can use icon Widget to navigate
You have to code the back button in "HomePage" class. In Flutter, when you navigate from page A to page B, the page B will be above page B, something like a stack, but page A and B have to be build on their owns.
A solution that might resolve your problem is to use this code in "HomePage"
return Scaffold(
appBar: AppBar(
title: const Text('Home Page'),
),
body: Center(
child: ElevatedButton(
child: Text('Back Button'),
onPressed: (){
Navigator.pop();
},
),
),
);
Navigator.push(context, MaterialPageRoute( builder: (context) => CardScreen() ));
Make sure you are using Navigator.push instead of Navigator.pushReplacement
I'm building an app for fire tv/fire stick using flutter.
My requirement: Show a dialog on press of a button in the fire TV remote and hide the dialog when the user presses the back button on the remote.
What I have accomplished: I'm able to show the dialog on the press of a button on the remote.
I need help in dismissing the dialog when the user presses back button on the remote.
What is happening now: When I press back while the dialog is shown, the entire page gets rerouted to the previous page.
I'm guessing it has something to do with the context, not sure how to fix this issue.
_showInfoModal(context) {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
backgroundColor: Colors.transparent,
content: Container(
child: Center(
child: Text(widget.message, style: TextStyle(color: Colors.white)),
),
)
);
},
);
}
This is the code I'm using to show the dialog.
Navigator.of(context, rootNavigator: true).pop();
This is how I'm trying to pop the alert dialog.
Can someone please help me out here? TIA.
Try below code hope its works because I also build apk for TV and use below Alert Code
showAlert(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Top '),
content: Text('Bottom '),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text('Ok'),
),
],
);
},
);
}
So I was able to accomplish this using a workaround.
Having a boolean variable and showing either the dialog or a container with 0 height.
Not a good approach but gets the work done.
I have made a flutter chat app, using Firebase.
I am listening to the messages using a stream builder. Another feature of my chat app is, when the user long presses his chat message, the message gets deleted.
I want to show a pop animation of the deleted message because right now message gets deletes abruptly.
You can use a show dialog for this.
void _showDialog() {
// flutter defined function
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
content: new Text("Are you sure you want to delete?"),
actions: <Widget>[
// usually buttons at the bottom of the dialog
FlatButton(
child: new Text("Delete"),
onPressed: () {
// Your deleteMessage method!
},
),
FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
You can read more from the official document.
the thing that you need is animated widget i don't know what kind of animation you need or how you going to use it but the best way to make it is watch or read the animated widget from flutter official doc
I am showing a dialogue with Get library and I want to dismiss automatically after a few seconds with Future. But I found no suitable function for that. So how do I dismiss a get dialogue after showing it?
code:
Get.dialog(Center(
child: Material(
color: Colors.blue,
child: Text('Hello'),
),
)); // how to dismiss? Like Get.Dismiss().
for dismiss dialog try using :
Get.back();
or
navigator.pop();
I have not used Get, but if you really want to do that thing, that I can suggest my way of doing it.
So, we will be using Flutter AlerDialog Class, which works the same, that is popping up the dialog, and you can always edit the content.
Now let us do these things:
Creating a dialog
Pop Up when the button is clicked
Auto dismiss the dialog
This will help you organize your solution. And we will be using Future only.
showAlertDialog(BuildContext context) {
// set up the button
Widget okButton = FlatButton(
child: Text("OK"),
onPressed: () { },
);
// set up the AlertDialog
AlertDialog alert = AlertDialog(
title: Text("My title"),
content: Text("This is my message."),
actions: [
okButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
This method will pop-up the dialog, and then autodismiss, the dialog:
void _ourAutoDismissDialog(BuildContext context){
//Calling out showdialog method
showAlertDialog(context);
//Auto dismissing after the 2 seconds
// You can set the time as per your requirements in Duration
// This will dismiss the dialog automatically after the time you
// have mentioned
Future.delayed(const Duration(seconds: 2), (){
Navigator.of(context).pop();
});
}
FlatButton(
onPressed: () => _ourAutoDismissDialog(context)
child: Text('Hello')
)
To dismiss the dialog, we need to do back operation, and we do it via Navigator.of(context).pop()
This is the result we get after implementing the above:
I tried implementing the CupertinoAlertDialog (https://api.flutter.dev/flutter/cupertino/CupertinoAlertDialog-class.html) but when I used it, it looked like this:
which is quite different from how it looks when signing in with google or as shown in the image here (https://flutter.dev/docs/development/ui/widgets/cupertino)
Here's the code:
showDialog(
context: context,
barrierDismissible: true,
builder: (_) => _buildAlertDialog());
Widget _buildAlertDialog() {
return CupertinoAlertDialog(
title: Text(
'\"Abc\" Wants to Use \"xyz.com\" to Sign In',
),
content: Text(
'This allows the app and website to share information about you.',
),
actions: <Widget>[
CupertinoDialogAction(
child: Text('Cancel'),
onPressed: () {
// Drop the dialog
Navigator.pop(context);
},
),
CupertinoDialogAction(
child: Text('Continue'),
onPressed: () {
// Drop the dialog
Navigator.pop(context);
// handle continue press
},
),
],
);
}
I tested your Code. I get the same result.
After some digging I found this : https://issue.life/questions/57676581
Looks like the backgroundColor is hardcoded. Not sure why that would be, or why it looks different to how it should.
I also found this: Flutter change dialog background color But I couldn't make any of those answers work in this case. Maybe you can though.
If nothing else works, you'll have to write your own Dialog widget. Good luck!