How to confirm app exit when appbar back button is pressed - flutter

I want to confirm exiting the app when the back button on the appbar is pressed.
appBar: AppBar(
leading: IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: Colors.white,
),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Save and Exit?'),
content: Text('are you sure you want to save and exit?'),
actions: [
FlatButton(
onPressed: () => Navigator.pop(context, false),
child: Text('No'),
),
FlatButton(
onPressed: () => Navigator.pop(context, true),
child: Text('Yes'),
),
],
);
},
);
// Navigator.pop(context);
},
),
I tried this but didn't work.
I have found some answers on how to do it when the system back button is pressed using WillPopScope but none of them work in my case.
Help me out

You can check it with Navigator.canPop(context) i guess. It will return true or false.
in onPressed you can check it, if it's true you can do Navigator.pop(context) otherwise call showDialog.
there is link of doc
https://api.flutter.dev/flutter/widgets/Navigator/canPop.html

Related

Flutter showDialog is not shown on PopupMenuItem tap

I'm using PopupMenuButton in my application. I want to showDialog on tapping a PopupMenuItem.
My PopupMenuItem:
PopupMenuItem(
child: Text("Show dialog"),
onTap: () {
showDialog(
context: context,
barrierColor: Colors.black26,
builder: (context) => AlertDialog(
...
)
},
),
Also using onSelected inside the PopupMenuButton didn't work.
Thats because onTap of popupMenuItem tries to use Navigator.pop to close the popup but at same time you are trying to show the dialog, So it closes the dialog and leaves the popup so, you can wait till the all the animations or ongoing things complete then show dialog
code: dartPad code
PopupMenuItem(
child: const Text('Item 0'),
onTap: () {
WidgetsBinding?.instance?.addPostFrameCallback((_) {
showCupertinoDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: const Icon(CupertinoIcons.info_circle),
content: const Text(
'Hello User, Welcome',
textAlign: TextAlign.center,
),
actions: [
CupertinoDialogAction(
isDefaultAction: true,
onPressed: () => Navigator.pop(context),
child: const Text('Thanks'),
),
],
);
});
});
}),
Try this one:
PopupMenuItem(
child: Text("Show dialog"),
onTap: () {
Future<void>.delayed(
const Duration(), // OR const Duration(milliseconds: 500),
() => showDialog(
context: context,
barrierColor: Colors.black26,
builder: (context) => AlertDialog(...),
),
),
},
);

How to run drawer code form an action's item?

As far as drawer code is intended to run from scaffold and if I use actions then drawer code does not work - is it possible to run drawer code from the action code?
appBar: AppBar(
title: age == Type.old ? const Text('Old') : const Text('New'),
actions: [
IconButton(icon: Icon(Icons.arrow_back_ios_outlined), onPressed: () {}),
IconButton(icon: Icon(Icons.arrow_forward_ios_outlined), onPressed: () {}),
IconButton(
icon: Icon(Icons.home),
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => AllCars()),
);
}),
IconButton(icon: Icon(Icons.menu), onPressed: () {
// how to run drawer code from here?
}),
],
),
You could use below method to open drawer of same scaffold
Scaffold.of(context).openDrawer();

Flutter: floating modal sheet

Is there a widget that is kind of like the Modal BottomSheet() where you call using the showModalBottomSheet function, but instead it is not sticking at the bottom but floating in the middle of the screen? like an alert dialog but you can add textField into it.
Do you mean SimpleDialog?
SimpleDialog(
title: Text('Choose food'),
children:[
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, "Pizza"); },
child: const Text('Pizza'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, "Burger");
},
child: const Text('Burger'),
),
],
elevation: 10,
//backgroundColor: Colors.green,
)

How to open an AlertDialog in Flutter by Button-Press?

after Button-press, i want to open an AlertDialog, but only if the variable bool showAlert is true.
This is my code until now:
FlatButton(
child: Text("HIER"),
onPressed: () {
return AlertDialog(
title: Text("HI"),
content: Text("Are you there?"),
actions: [
FlatButton(child: Text("Yes"), onPressed: () {},),
FlatButton(child: Text("No"), onPressed: () {},)
],
elevation: 24,
);
},
),
For my question (opening the alert if bool is true), the problem is, the AlertDialog is not opening.
Any solutions? Thanks
To show an AlertDialog you need a showDialog, so the code results like this :
FlatButton(
child: Text("HIER"),
onPressed: () {
if(showAlert){
showDialog(
//if set to true allow to close popup by tapping out of the popup
barrierDismissible: false,
context: context,
builder: (BuildContext context) => AlertDialog(
title: Text("HI"),
content: Text("Are you there?"),
actions: [
FlatButton(child: Text("Yes"), onPressed: () {},),
FlatButton(child: Text("No"), onPressed: () {},)
],
elevation: 24,
),
);
}
},
),
Use this code to show native diolog depends on platform:
FlatButton(
child: Text("HIER"),
onPressed: () {
if (Platform.isIOS) {
showCupertinoDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: Text("HI"),
content: Text("Are you there?"),
actions: [
CupertinoDialogAction(
child: Text("Yes"),
onPressed: () {},
),
CupertinoDialogAction(
child: Text("No"),
onPressed: () {},
)
],
);
},
);
} else {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text("HI"),
content: Text("Are you there?"),
actions: [
FlatButton(
child: Text("Yes"),
onPressed: () {},
),
FlatButton(
child: Text("No"),
onPressed: () {},
)
],
elevation: 24,
);
},
);
}
},
);
Check out this code, Hope it will help you
openDialog(bool showAlert, BuildContext context) async {
if(!showAlert) return;
var result = await showDialog(
context: context,
builder: (BuildContext context) => AlertDialog(
title: Text("HI"),
content: Text("Are you there?"),
actions: [
FlatButton(child: Text("Yes"), onPressed: () {
Navigator.pop(context, true);
},),
FlatButton(child: Text("No"), onPressed: () {
Navigator.pop(context, false);
},)
],
elevation: 24,
),
);
if(!(result ?? false)) {
// Yes click
} else {
// No click
}
}
Alternative
GetX Package Get.dialog()
And for many other scaffold components.
Dialog, Bottosheet, Snackbar, StateManagent Getx and Obx builder, and much more.
Visit pub.dev and search for GetX

show dialog when long pressed and pop it when finger up

I want to show a dialog when user long pressed on an item and pop it when finger up but it can't detect tap up.
I put dialog on another GestureDetector and use onTapUp property of it to pop dialog.
GestureDetector(
child: studentIcon(index, context),
onLongPress: () {
showDialog(
context: context,
builder: (context) {
return GestureDetector(
onTapUp: (detail) {
Navigator.pop(context);
},
child: DialogDetail(
index: index,
),
);
});
},
I expect to pop dialog after finger up after long pressed.
You can't do that as there is an context problem in GestureDetector.
Please follow this answer to implement this thing.
Try to make method to open dialog . i provide alert dialog code..
void _showText(BuildContext context) {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return AlertDialog(
content: Text(
"User name :${nameEditText.text} \nPassword : ${passwordEditText.text}"),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: new Text("OK"))
],
);
});
}
}
after that called on button click..
child: RaisedButton(
padding: EdgeInsets.all(15.0),
onPressed: () {
_showText(context);
},
child: Text(
"Submit",
style: TextStyle(fontSize: 15, color: Colors.white),
),
color: Colors.blue,
),