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
Related
what'd I miss ? is it because dart version or other things ,
environment:
sdk: ">=2.16.1 <3.0.0"
1. error
Error: The value 'null' can't be returned from a function with return
type 'Widget' because 'Widget' is not nullable.
'Widget' is from 'package:flutter/src/widgets/framework.dart'
// Alertdialog box showing
showAlertDialog(BuildContext context) {
AlertDialog alert = AlertDialog(
content: Padding(
padding: const EdgeInsets.only(top: 22.0, bottom: 22),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: Text(
"Would you like to get latest updates and notifications?",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black, fontSize: 18),
),
),
SizedBox(height: 24),
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
FlatButton(
onPressed: () {
setState(() {
snackBarText = "You will not recive notifications.";
});
Navigator.of(context).pop();
Navigator.of(context).pushReplacement(new MaterialPageRoute(
builder: (BuildContext context) => null));
},
child: Text(
"DENY",
style:
TextStyle(color: Colors.white, fontSize: 16, height: 1.2),
),
color: Colors.purple,
),
SizedBox(width: 10),
FlatButton(
onPressed: () {
setState(() {
snackBarText = "You will recive notifications.";
});
Navigator.of(context).pop();
Navigator.of(context).pushReplacement(new MaterialPageRoute(
builder: (BuildContext context) => null));
},
child: Text(
"ALLOW",
style: TextStyle(
color: Colors.purple, fontSize: 16, height: 1.2),
),
shape: RoundedRectangleBorder(
side: BorderSide(width: 1, color: Colors.purple)),
color: Colors.white,
)
])
],
),
),
);
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
**2.**error
lib/ua_Screens.dart:29:8: Error: Field '_image' should be initialized
because its type 'File' doesn't allow null.
'File' is from 'dart:io'. File _image;
^^^^^^
File _image;
Future get_image() async {
final image = await ImagePicker.pickImage(source: ImageSource.camera);
setState(() {
_image = image;
});
}
I think you write wrong code, try below code hope its help to used. and one thing dont used FlatButton used TextButton because FlatButton is depriciated by flutter.
Refer TextButton
Your Alert Dialog function:
showAlertDialog(BuildContext context) {
return AlertDialog(
content: Padding(
padding: const EdgeInsets.only(top: 22.0, bottom: 22),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: Text(
"Would you like to get latest updates and notifications?",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black, fontSize: 18),
),
),
SizedBox(height: 24),
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
FlatButton(
onPressed: () {
setState(() {});
Navigator.of(context).pop();
Navigator.of(context).pushReplacement(new MaterialPageRoute(
builder: (BuildContext context) => null));
},
child: Text(
"DENY",
style:
TextStyle(color: Colors.white, fontSize: 16, height: 1.2),
),
color: Colors.purple,
),
SizedBox(width: 10),
FlatButton(
onPressed: () {
setState(() {});
Navigator.of(context).pop();
Navigator.of(context).pushReplacement(new MaterialPageRoute(
builder: (BuildContext context) => null));
},
child: Text(
"ALLOW",
style: TextStyle(
color: Colors.purple, fontSize: 16, height: 1.2),
),
shape: RoundedRectangleBorder(
side: BorderSide(width: 1, color: Colors.purple)),
color: Colors.white,
)
])
],
),
),
);
}
Your Widget:
ElevatedButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return showAlertDialog(context);
},
);
},
child: Text('Pressed Me'),
),
Your result screen->
Your alert dialog->
Your Second error refer my answer here and here
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)),
...
I have a counter variable that is incremented every time a user opens a page. When the page is opened for 5th time I want to show a dialog. So I have used showDialog in this case. I have used showDialog inside a function. And used it in a if else short hand. In the 5th time the app is showing the following error -
'package:flutter/src/widgets/navigator.dart': Failed assertion: line 5253 pos 12: '!_debugLocked': is not true.
Here is the code-
Future<Widget> _showDialog(BuildContext c) async {
return await showDialog(
context: c,
barrierDismissible: false,
builder: (c) {
return AlertDialog(
elevation: 24.0,
backgroundColor: Colors.blue,
title: Text(
'Liking our app?',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
actions: <Widget>[
TextButton(
child: Text(
"Continue as Guest",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
onPressed: () {},
),
TextButton(
child: Text(
"Sign Up",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
onPressed: () {},
),
],
);
});
}
Text("$_counter", textAlign: TextAlign.center),
(_counter == 5) ? _showDialog(context) : SizedBox(),
I had to add the following line of code before returning await showDialog(....);
await Future.delayed(Duration(seconds: 1));
And used Futurebuilder instead of directly calling the function.
(_counter == 8)
? FutureBuilder<Widget>(
future: _showDialog(context),
builder: (context, AsyncSnapshot<Widget> snap) {
if (snap.hasData) {
return snap.data;
} else {
//return CircularProgressIndicator();
return Container(height: 0.0, width: 0.0);
}
})
: Container(
height: 0.0,
width: 0.0,
),
Im making a counter app and want to be able to change the title of the appbar by taking input from the user using an popup input box.
I am trying to have the user input a name(string) in an AlertDialog with textfield in it and trying to recieve the string in the main page by defining a function for the popup which returns the inputted string when confirm button is pressed. I'm assigning a variable to this function using await in the onPressed() of the main page and then displaying the string variable change in a snackbar. however, the snackbar is appearing as soon i tap on the textfield without even submitting or hitting the confirm button. it looks like either the await isnt working or for some reason the Alertdialog's parent function is returning null as soon as I tap on the textfield.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: CounterApp(),
));
class CounterApp extends StatefulWidget {
#override
_CounterAppState createState() => _CounterAppState();
}
class _CounterAppState extends State<CounterApp> {
int num = 0;
String name = 'MyCounter-1';
Future<String> changeName() async {
final _controller = TextEditingController();
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
title: Text('Change counter name'),
content: TextField(
controller: _controller,
onSubmitted: (str) {
//Navigator.of(context).pop(str);
},
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop(_controller.text.toString());
},
child: Text(
'Confirm',
style: TextStyle(
fontSize: 18.0,
),
),
),
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
'Cancel',
style: TextStyle(
fontSize: 18.0,
),
),
),
],
);
},
);
}
void snackBar(BuildContext context, String string) {
final snackbar = SnackBar(content: Text('Counter renamed to $string'),);
Scaffold.of(context).showSnackBar(snackbar);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(name),
centerTitle: true,
actions: <Widget>[
IconButton(
onPressed: () {
setState(() {
num = 0;
});
},
icon: Icon(
Icons.refresh,
size: 35.0,
),
),
Builder(
builder: (context) => IconButton(
onPressed: () async {
setState(() async {
name = await changeName();
snackBar(context, name);
});
},
icon: Icon(
Icons.edit,
size: 35.0,
),
),
),
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Center(child: Text(
'$num',
style: TextStyle(
fontSize: 75,
),
)),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 10),
child: RaisedButton(
onPressed: () {
setState(() {
num += 1;
});
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0)
),
color: Colors.blue,
child: Text(
'+',
style: TextStyle(
fontSize: 100.0,
),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
child: RaisedButton(
onPressed: () {
setState(() {
num -= 1;
});
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0)
),
color: Colors.grey,
child: Text(
'-',
style: TextStyle(
fontSize: 100.0,
),
),
),
)
],
),
);
}
}
As Soon as I tap on the edit button, this happens:
Image of problem
Just Add await keyword before showDialog() and add return statement at last as shown in the below code.
Future<String> changeName() async {
final _controller = TextEditingController();
await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
title: Text('Change counter name'),
content: TextField(
controller: _controller,
onSubmitted: (str) {
//Navigator.of(context).pop(str);
},
),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop(_controller.text.toString());
},
child: Text(
'Confirm',
style: TextStyle(
fontSize: 18.0,
),
),
),
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
'Cancel',
style: TextStyle(
fontSize: 18.0,
),
),
),
],
);
},
);
return _controller.text;
}
How did i setup popup AlertDialog when int is equal or greater than 100?
showDialog(
context: _context,
builder: (BuildContext context) => AlertDialog(
title: Text("$_winner Won"),
)
);
void scoreTeamA() {
setState(() {
outputTeamA += _choiceA;
});
}
// I would like to show outputTeamA on the AlertDialog
Thank you
Mohammad
One way is to create a Widget for the AlertDialog and pass the String/Widget you want to show on that dialog.
class LoadingDialog{
static Future<void> showLoadingDialog(BuildContext context,String text) async {
return showDialog(
context: context,
builder: (BuildContext context){
return SimpleDialog(
children: <Widget>[
Center(
child: Container(
child: Column(
children: <Widget>[
SizedBox(
height:10,
),
Text(text),
]
),
),
),
],
),
}
);
}
}
then you can call on an Event like:
void scoreTeamA(){
outputTeamA += _choiceA;
LoadingDialog.showLoadingDialog(context, outputTeamA);
}
Note: this code might have some errors. i haven't tested this.
This is how I display an AlertDialog
showAlertDialog() {
return showDialog(
context: context,
builder: (context) => AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
side: BorderSide(color: Colors.redAccent, width: 2.0),
),
elevation: 6,
titlePadding: EdgeInsets.all(8.0),
titleTextStyle: TextStyle(
fontSize: 18, color: Colors.red, fontWeight: FontWeight.bold),
title: Text(
'This is the alert title',
textAlign: TextAlign.center,
),
contentPadding: EdgeInsets.all(8.0),
contentTextStyle: TextStyle(fontSize: 14, color: Colors.black),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Content...')
//content goes here
],
),
actions: <Widget>[
FlatButton(
onPressed: () => Navigator.of(context).pop(), child: Text('Okay'))
],
),
);
}
And then you would do your if check to check
if( outputTeamA >= 100){
showAlertDialog();
}
Of course you could use outputTeamA in AlertDialog