I'm trying to use CupertinoAlertDialog on my profile page. It works just fine on my other page, but not the profile page.
Here is my code:
showCupertinoModalPopup(
context: context,
builder: (context) => CupertinoActionSheet(
actions: [
image != null ? CupertinoActionSheetAction(
child: Text('Remove photo',
style: TextStyle(
color: Colors.red
),),
onPressed: () {
Navigator.pop(context);
_openDialog(context);
},
)
void _openDialog(ctx) {
showCupertinoDialog(
context: ctx,
builder: (_) => CupertinoAlertDialog(
title: Text("Delete Chat"),
content: Text("Messages will be removed from this device only."),
actions: [
// Close the dialog
// You can use the CupertinoDialogAction widget instead
CupertinoButton(
child: Text('Cancel',
style: TextStyle(
color: Color(0xFF2481CF)
),
),
onPressed: () {
Navigator.of(ctx).pop();
}),
CupertinoButton(
child: Text('Delete',
style: TextStyle(
color: Colors.red
),
),
onPressed: () {
Navigator.of(ctx).pop();
},
)
],
));
}
And this is the error:
Is there any solutions?
Try this
Navigator.of(context).pop(false);
instead of
Navigator.of(ctx).pop();
In your code.its working for me.
Your Alert:
openDialog(BuildContext context) {
showCupertinoDialog(
context: context,
barrierDismissible: false,
builder: (context) => CupertinoAlertDialog(
title: Text('Delete Chat'),
content: Text('Messages will be removed from this device only.'),
actions: <Widget>[
CupertinoButton(
onPressed: () => Navigator.of(context).pop(false),
child: Text(
'Cancel',
style: TextStyle(
color: Color(0xFF2481CF),
),
),
),
CupertinoButton(
onPressed: () => Navigator.of(context).pop(true),
child: Text(
'Delete',
style: TextStyle(color: Colors.red),
),
),
],
),
);
}
Your Widget:
ElevatedButton(
onPressed: () {
showCupertinoModalPopup(
context: context,
builder: (context) => CupertinoActionSheet(
actions: [
CupertinoActionSheetAction(
child: Text(
'Remove photo',
style: TextStyle(color: Colors.red),
),
onPressed: () {
Navigator.pop(context);
openDialog(context);
},
),
],
),
);
},
child: Text('Click me'),
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
),
Related
I'm building an flutter web app and came across this issue.
I have a text field in an alert dialog.
It works perfectly in my laptop, but the alert dialog is unstable in my mobile.
Here's my code. How can I fix this?
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('Add Tag'),
content: TextField(
controller: tagController,
decoration: InputDecoration(
hintText: 'Type here',
suffix: IconButton(
icon: const Icon(
Icons.clear,
size: 16,
),
onPressed: () {
tagController.clear();
},
),
),
),
actions: [
TextButton(
onPressed: () {
setState(() {
Navigator.pop(
context);
});
},
child: const Text(
'Cancel',
style: TextStyle(
color:
Colors.red),
)),
TextButton(
onPressed: () async {
},
child: const Text(
'OK',
style: TextStyle(
color:
Colors.green),
))
],
);
});
When I use a banner inside an alert dialog, the action widget becomes transparent.
I am using google_mobile_ads plugin.
....
final BannerAd _bannerAdForExitDialog = BannerAd(
adUnitId: Constants.getBannerAdUnit,
size: AdSize.mediumRectangle,
request: const AdRequest(),
listener: BannerAdListener(
onAdFailedToLoad: (ad, error) {
ad.dispose();
},
),
);
.....
#override
void initState() {
super.initState();
_bannerAdForExitDialog.load();
}
....
TextStyle _getActionTextStyle() {
return const TextStyle(fontSize: 18, color: Colors.red);
}
....
AlertDialog(
title: const Text(
"Do you want to exit?",
style: TextStyle(color: Colors.black),
),
content: Container(
alignment: Alignment.center,
color: Colors.transparent,
height: _bannerAdForExitDialog.size.height.toDouble(),
width: _bannerAdForExitDialog.size.width.toDouble(),
child: AdWidget(ad: _bannerAdForExitDialog),
),
actions: [
TextButton(
//onPressed: () => exit(0),
onPressed: () => print('yes'),
child: Text(
'Yes',
style: _getActionTextStyle(),
),
),
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(
'No',
style: _getActionTextStyle(),
),
),
],
);
.....
Here is the output. Even if I have assigned a red color to 'yes' and 'no' text buttons the color is still transparent
Here is a work around
Future<bool> _showExitPopup(context) async {
return await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text(
"Do you want to exit?",
style: TextStyle(color: Colors.black),
),
content: Stack(
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
_getWidgetIfTrue(
condition: _isBannerAdForExitDialogLoaded,
widget: SizedBox(
height: _bannerAdForExitDialog.size.height.toDouble(),
width: _bannerAdForExitDialog.size.width.toDouble(),
),
),
SizedBox(
width: _bannerAdForExitDialog.size.width.toDouble(),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () => exit(0),
//onPressed: () => print('yes'),
child: Text(
'Yes',
style: Constants.getTextStyleForAlertDialogActions(
context,
).copyWith(color: Colors.red),
),
),
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(
'No',
style: Constants.getTextStyleForAlertDialogActions(
context,
),
),
),
],
),
)
],
),
_getWidgetIfTrue(
condition: _isBannerAdForExitDialogLoaded,
widget: _getBannerAd(_bannerAdForExitDialog),
),
],
),
);
},
);
}
I want to Call a Dialog Function from another Class File in flutter what is the Proper Way of doing That...
File1:-
import 'package:eg/eg/dialog_file.dart'
floatingActionButton: FloatingActionButton(
onPressed: () {
// This is where I want to call the function
},
backgroundColor: Colors.black,
child: Container(
child: Icon(
icons.add,
size: 23,
color: Colors.white,
),
),
),
File2:-
showMyDialog(parentContext) {
return showDialog(
context: parentContext,
builder: (context) {
return SimpleDialog(
title: Text("Title"),
children: <Widget>[
SimpleDialogOption(
child: Text("Option1"),
onPressed: function1,
),
SimpleDialogOption(
child: Text("Option2"),
onPressed: function2,
),
SimpleDialogOption(
child: Text("Option3"),
onPressed: function3,
),
],
);
},
);
}
So the Dialog Function have onPressed Functions that are in the File2 so I am unable to write a custom dialog Function in File1
how could I achieve this?
You don't mention where your function1 etc... come from but in general here is one way call a dialog from another class. I make them static so I don't have to create an instance of the class.
class Dialogs {
static Future<void> showMyDialog(parentContext) {
return showDialog(
context: parentContext,
builder: (context) {
return SimpleDialog(
title: Text("Title"),
children: <Widget>[
SimpleDialogOption(child: Text("Option1"), onPressed: () {}),
SimpleDialogOption(child: Text("Option2"), onPressed: () {}),
SimpleDialogOption(child: Text("Option3"), onPressed: () {})
],
);
},
);
}
}
And here's an example of a button that will display the above dialog by passing in the context from the build method that it is inside of.
ElevatedButton(
onPressed: () => Dialogs.showMyDialog(context),
child: Text('Dialog'),
),
You should try below answer :
First write your Dialog Function in other class
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white30,
child:AlertDialog(
title: Text(
'name',
style: TextStyle(
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
content: Text(
'name',
style: TextStyle(
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(),
child: Text('OK'),
)
],
),
);
}
Then write dialog class function in other class or where you call it like below:
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CampaignData(),
),
);
},
Everything works fine, it's just that the sheet appears at the top instead of the bottom. I would like the cupertinoactionsheet to appear from the bottom as default.
I'm currently using an Android emulator but I doubt it's the reason why the sheet is appearing from the top.
Attached is my code
Future<bool> showReportDialog({
#required BuildContext context,
}) async {
return showCupertinoDialog(
context: context,
builder: (context) => CupertinoActionSheet(
title: const Text('Make Your Space Safe',
style: TextStyle(
fontSize: 18, color: Colors.black, fontWeight: FontWeight.w600)),
message: const Text('What to report this user for?',
style: TextStyle(
fontSize: 16.5,
color: Colors.black38,
fontWeight: FontWeight.w500)),
actions: <CupertinoActionSheetAction>[
CupertinoActionSheetAction(
child: const Text(
'Scam',
),
onPressed: () {
afterReport();
print("Reported user for SCAM");
},
),
CupertinoActionSheetAction(
child: const Text('Bots/Spam'),
onPressed: () {
afterReport();
print("Reported user for BOTS/SPAM");
},
),
CupertinoActionSheetAction(
child: const Text('Sexually harassing'),
onPressed: () {
afterReport();
print("Reported user for SEXUALLY HARASSSING");
},
),
CupertinoActionSheetAction(
child: const Text('Offensive/abusive behaviour'),
onPressed: () {
afterReport();
print('Reported user for OFFENSIVE/ABUSIVE BEHAVIOUR');
},
),
CupertinoActionSheetAction(
child: const Text('I want to write more',
style: TextStyle(fontWeight: FontWeight.bold)),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (BuildContext context) => ReportUser()));
},
),
CupertinoActionSheetAction(
child: const Text('Cancel'),
onPressed: () {
Navigator.pop(context);
},
)
],
),
);
}
You need to use showCupertinoModalPopup instead of showCupertinoDialog:
showCupertinoModalPopup(
context: context,
builder: (context) => CupertinoActionSheet(
title: const Text('Make Your Space Safe',
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w600)),
...
When I click the button, I want to show a dialog when the process is finished, but although I add the dialog part I cant see alertdialog in my screen.
Where am I doing wrong? here's my code;
child: InkWell(
onTap: () async {
final selectedLanguage =
await SharedPreferences.getInstance();
final setLanguage =
selectedLanguage.getString('selectedLanguage');
String language =
allTranslations.getLocaleKey(setLanguage);
_forgotPassword =
await createPasswordCode(_controller.text, language);
_dialog('Try');
},
child: Center(
child: Text(
'Send',
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
And here's my dialog part
Widget _dialog(String title) {
return AlertDialog(
title: Text(
title,
style: TextStyle(fontWeight: FontWeight.bold),
),
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(20)),
),
actions: [
FlatButton(
child: Text('Approve'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
}
You need to call the alertDialog inside showDialog.
InkWell(
onTap: () async {
final selectedLanguage =
await SharedPreferences.getInstance();
final setLanguage =
selectedLanguage.getString('selectedLanguage');
String language =
allTranslations.getLocaleKey(setLanguage);
_forgotPassword =
await createPasswordCode(_controller.text, language);
showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return _dialog("try");
},
);
},
child: Center(
child: Text(
'Send',
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
))
Widget _dialog(String title) {
return showDialog(
barrierDismissible: false,
context: context,
child: AlertDialog(
title: Text(
title,
style: TextStyle(fontWeight: FontWeight.bold),
),
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(20)),
),
actions: [
FlatButton(
child: Text('Approve'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
)
),
);
}
you need the showDialog method to show the dialog box