I want to make simple quiz app in flutter. I will save all questions in class. And, then I will use conditional statement to check if a question is correct.
print (check)icon on screen else print (close).
When questions end, I want to print AlertDialog which says that the quiz question has ended. And, then reset the quiz.
How can I do this?
You can show AlertDialog at end of questions, that after navigate to home page. like this:
await showDialog(
context: this.context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('AlertDialog Title'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('This is a demo alert dialog.'),
Text('Would you like to approve of this message?'),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('Approve'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
Navigator.of(context).pop(); // this line navigate to prevues page(like home)
Related
I have sigIn function that get data from Api and move to another screen if request is successful and if request is not successful then show alertDialog
I change state and before fetching data I show CircularProgressIndicator to make user know that data is fetching.
But when alertDialog window pops up and I close it then CircularProgressIndicator doesn't disappear. How to remove WaitingSignInAuth and show me Scaffold with inputs
When error comes then I emit ErrorSignInAuth but why there is WaitingSignInAuth to.. Why ErrorSignInAuth doesn't replace WaitingSignInAuth or it should work differently?
This is the code:
#override
Widget build(BuildContext context) {
return BlocConsumer<AuthCubit, AuthState>(
listener: (context, state) {
if (state is WaitingSignInAuth) {
showDialog(
context: context,
builder: (context) => Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.black.withOpacity(0.6),
child: const Center(
child: CircularProgressIndicator(
strokeWidth: 1,
color: Colors.black,
backgroundColor: Colors.white,
),
),
));
}
if (state is ErrorSignInAuth) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Bad request"),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text("Error")
],
),
),
actions: <Widget>[
TextButton(
child: const Text("Close"),
onPressed: () {
Navigator.pop(context); // If i press it then alertDialog diappears but not the loading circle
},
)
],
);
}
);
}
},
);
}
This is how it looks like:
The issue is, that you showDialog() twice. First is shown when WaitingSignInAuth state is fired, and the second one when you receive ErrorSignInAuth.
So Navigator.pop(context); in the "error" alert dialog closes only the showDialog that you've triggered in if (state is ErrorSignInAuth), the second dialog, which contains progress indicator is still visible.
To easy fix it, you can change your code to:
TextButton(
child: const Text("Close"),
onPressed: () {
Navigator.pop(context);
Navigator.pop(context);
},
)
But in my opinion thats not the best fix to your issue. IMO you don't need to show ProgressIndicator for WaitingSignInAuth in the dialog. Adjust your UI in the way, that the container with progress indicator will be displayed over it, but this doesn't need to be a dialog.
The "OK" button on my alert dialog navigates to a new page. But when I go back to the previous page, the alert is still there. Is there any way for the alert to disappear after I navigate to the new page?
// Alert Dialog
Future<void> _handlePhoto(BuildContext context) {
return showDialog<void>(
context: context,
builder: (BuildContext context) {
return CupertinoAlertDialog(
title: Text('Please Position Crosshair'),
content: const Text(
'Before detecting cancer, ensure your focus area is centered.'),
actions: <Widget>[
FlatButton(
child: Text('OK'),
onPressed: () {
Navigator.of(context).pushNamed(
'/camerapage',
arguments: cameras,
);
},
),
],
);
},
);
}
Before pushing the new page, you need to pop the dialog like this. So when you come back it is not there.
onPressed: () {
Navigator.of(context).pop();
Navigator.of(context).pushNamed(
'/camerapage',
arguments: cameras,
);
}
In my app users are required to submit their government ID's for verification to keep using the app. On the basis of the condition "isIDverified" it displays a text "Verified" or if it's under review it displays "Under Review". Inside the verified condition I want to put a popup which will say "Your account is under review" along with the text somewhere around this green empty block.
My code:
if (isIDVerified) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Verified',
style: kAppBarTitleTextStyle.copyWith(color: primaryColor),
),
SizedBox(
width: _screenUtil.setWidth(10),
),
Icon(
Icons.verified_user,
size: kPreferredIconSize,
color: Colors.green,
),
],
);
} else if (isIDUnderReview) {
return
Text(
'ID Under Review',
style: kAppBarTitleTextStyle.copyWith(color: primaryColor),
);
As far as I understand your question, I would like to answer it.
For displaying popups, you can make use of AlertDialogs.
You can do something like this.
void informUser() {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: new Text("Under Review"),
content: Column(
children: [ LIST OF WIDGETS ]
),
actions: <Widget>[
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
You can put your widgets in the Column widget of AlertDialog's content.
When a user clicks on delete for an employee, an AlertDialog shall pop up to warn the user.
If the user confirms the deletion, then the AlertDialog disappears and at the bottom of the Scaffold a SnackBar should appear with an Undo function.
Problem:
When I implement the SnackBar method showSnackBar(context, index, employee) within the AlertDialog class I get the following error:
he following assertion was thrown while handling a gesture:
Scaffold.of() called with a context that does not contain a Scaffold.
showDeleteDialog(BuildContext context, Employee employee, int index) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title:
Text('Are you sure you want to delete: ${employee.name} ?'),
actions: <Widget>[
Row(
children: <Widget>[
FlatButton(
child: Text('Yes'),
onPressed: () {
DatabaseProvider.db.deleteEmployee(employee.id).then(
(_) => BlocProvider.of<EmployeeBloc>(context)
.add(DeleteEmployee(index)));
Navigator.pop(context,employee);
showSnackBar(context, index, employee);
}),
FlatButton(
child: Text('No!'),
onPressed: () => Navigator.pop(context)),
],
)
],
));
}
Instead, I thought I could return an employee from the showDeleteDialog when I confirm the deletion. When the result is not null, then I should show the SnackBar. I tried to implement this with Future/Async but with no success.
onPressed: () async {
Employee deletedEmployee = await showDeleteDialog(context, employee, index);
await showSnackBar(context, index, deletedEmployee);
},
Edit: I would like to avoid using GlobalKey if possible, since I read it is not good for the App's performance.
As the error says Scaffold.of() called with a context that does not contain a Scaffold., that means the current context that you are passing to showSnackBar() method doesn't contain a Scaffold in the immediate parent.
We can fix this by using GlobalKey and assign it to the Scaffold. Declare a global key in your stateful widget and pass this as a key in your Scaffold, as below:
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
....
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text(widget.title),
),
I call a method _showSnackBar() after navigator.pop() on OK button click inside the alertDialog, as below:
return AlertDialog(
title: Text('Not in stock'),
content: const Text('This item is no longer available'),
actions: <Widget>[
FlatButton(
child: Text('Ok'),
onPressed: () {
Navigator.of(context).pop();
_showSnackBar();
},
),
],
);
Then in the _showSnackBar() method, use the key to show the snackbar, as below:
void _showSnackBar() {
_scaffoldKey.currentState.showSnackBar(
SnackBar(
content: Text('Snackbar is displayed'),
));
}
With this approach, once you tap on OK button on alertDialog, the dialog will close and you'll see the snackbar. You may need to customize this per your code as you shared above.
Hope this answers your question and resolves your issue.
Found the solution and it is super easy...
I only had to re-name one of the context to a dialogContext
showDeleteDialog(BuildContext context, Employee employee, int index) {
showDialog(
context: context,
builder: (dialogContext) => AlertDialog(
title:
Text('Are you sure you want to delete: ${employee.name} ?'),
actions: <Widget>[
Row(
children: <Widget>[
FlatButton(
child: Text('Yes'),
onPressed: () {
DatabaseProvider.db.deleteEmployee(employee.id).then(
(_) => BlocProvider.of<EmployeeBloc>(dialogContext)
.add(DeleteEmployee(index)));
Navigator.pop(dialogContext);
showSnackBar(context, index, employee);
}),
FlatButton(
child: Text('No!'),
onPressed: () => Navigator.pop(context)),
],
)
],
));
}
in android, when you tap on the "barrier"/outside/background of a (material) modal dialog created using showDialog(), the dialog closes by default.
when you tap on that barrier on an iphone (physical device), the tap to close is ignored and the modal stays open.
i realize there is a "showCupertinoDialog" option, but i am trying to avoid using it (it doesn't tap-barrier-to-close either).
the flutter/dart documentation doesn't indicate any differences in expected behavior of android -vs- ios. i've included some example code that illustrates the issue, i would expect the _showMaterialDialog() dialog to close on iphones, but it does not.
any idea why this is not working? is this a bug or expected behavior? Thanks!
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class dialogtest extends StatefulWidget {
#override
dialogtestState createState() => dialogtestState();
}
class dialogtestState extends State<dialogtest> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Dialog Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {
_showMaterialDialog();
},
child: Text('Show Material Dialog'),
),
SizedBox(
height: 20,
),
RaisedButton(
onPressed: () {
_showCupertinoDialog();
},
child: Text('Show Cupertino Dialog'),
),
],
),
)));
}
void _showMaterialDialog() {
showDialog(
context: context,
barrierDismissible: true, // ********* ignored in ios, defaults to true anyway!!
builder: (context) {
return AlertDialog(
title: Text('Material Dialog'),
content: Text('This is the content of the material dialog'),
actions: <Widget>[
FlatButton(
onPressed: () {
_dismissDialog();
},
child: Text('Close')),
FlatButton(
onPressed: () {
print('HelloWorld!');
_dismissDialog();
},
child: Text('HelloWorld!'),
)
],
);
});
}
_dismissDialog() {
Navigator.pop(context);
}
void _showCupertinoDialog() {
showDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: Text('Cupertino Dialog'),
content: Text('This is the content of the cupertino dialog'),
actions: <Widget>[
FlatButton(
onPressed: () {
_dismissDialog();
},
child: Text('Close')),
FlatButton(
onPressed: () {
print('HelloWorld!');
_dismissDialog();
},
child: Text('HelloWorld!'),
)
],
);
});
}
}
i figured it out in case anyone runs into this behavior randomly.
i was using flutter 1.7 (and working with android only) when I created the project. in order to support "unfocusing" of a text field when tapping outside of it, i wrapped the whole project in a GestureDetector with the instructions from here:
https://flutter360.dev/dismiss-keyboard-form-lose-focus
Everything worked perfectly. When I moved the app to a mac for iOS testing, i did a new install of flutter which came with v1.9.1+hotfix.6. I guess something in flutter changed from 1.7 -> 1.9.1 which breaks this unsupported implementation. not considering the difference between my windows/android flutter version (where it worked) to my mac/ios version (where it did not work), i assumed it was an iOS thing. Once I upgraded flutter on my PC to 1.9.1 the dialogs were no longer dismissible on my android phone.
I still need/want a way to tap-to-dismiss the keyboard from a text field. I am trying out the Listener solution from here which seems to be working as expected so far:
Flutter. A way for TextField to detect tap outside
I guess this is an exercise in side-effects of creative solutions to functionality not provided out of box by the framework coupled with understanding the impacts of updating the framework.