I have a screen on which a user can input some number which he then confirms. Confirming makes an API call. This call can fail. When it fails I show an AlertDialog with showDialog.
What I want is, that when the user dismisses the dialog the screen refreshes/reloads. The input data should be erased (and there are some other effects which should be reset too).
I'm not sure what the best way to achieve this is.
void _handleError(e) {
showDialog(
context: context,
builder: (BuildContext builder) {
return AlertDialog(
title: Text(e.toString()),
content: Text('Some content'),
);
},
);
// I'm guessing I should do something here?
}
// This is the handler for the confirm buttons `onPressed` field.
void _pay(context) {
double amount = double.parse(textFieldController.text);
apiClient
.createInvoice(amount)
.then((Map<String, dynamic> invoice) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return Pay(invoice);
}),
);
}).catchError(handleError);
}
The showDialog() function returns a Future when it gets dismissed. So you can chain a then() call to the showDialog() and perform your clean up there.
void _handleError(e) {
showDialog(
context: context,
builder: (BuildContext builder) {
return AlertDialog(
title: Text(e.toString()),
content: Text('Some content'),
);
},
).then((_){
//do your clean up
_inputTextController.text = '';
});
}
Related
I'm trying to create an app in Flutter.
When a particular button is pressed a Dialog shows up. In the dialog, the user can write to TextField. I want to use this text in the previous screen when the dialog is closed with pop().
Is there any way to do it?
try this:
showDialog(
context: context,
builder: (context) => Dialog(),
).then((result){
// use the result here
});
and in dialog pop like this:
Navigator.pop(context, result);
You can await to get data from button. also You can pass data .pop(YourValue)
onPressed: () async {
final data = await showDialog(
context: context,
builder: (context) {
final TextEditingController controller =
TextEditingController(); // this can be outside to get direct text from it
return AlertDialog(
content: TextField(
controller: controller,
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(controller.text);
},
child: Text("Close"))
],
);
},
);
if (data != null) {
//your operation
}
print(data);
},
How can I improve this alert dialog so that it always displays for 1 second then disappears. Sometimes the navigator pop doesn't work on the correct context and "misses" it when code is layered in other widgets. Is there a way to guarantee the correct context? I need a consistent fix and already tried another thread's answer. barrierDismissible: false, did not fix this.
showAlertDialogTMPCoinsAdded(BuildContext context, String title, String content) {
Timer timer = Timer(Duration(milliseconds: 1000), (){
Navigator.of(context, rootNavigator: true).pop();
});
AlertDialog alert = AlertDialog(
title: Text(title),
content: Image.asset('assets/images/coins.gif'),
);
showDialog(
barrierDismissible: false,
context: context,
builder: (BuildContext context) {
return alert;
},
).then((value){
timer.cancel();
});
}
Basically I have a button(GestureDetector) which to call Future function in the same file. The thing is the widget in that function does not appear as it should but the background process is successfully running.
The trigger:
showDialog(
context: context,
builder: (context) {
AlertDialog(
/// Below the button to call function *resetPassword*
GestureDetector(
child: Text("Yes"),
onTap: () async {
Navigator.of(context).pop();
resetPassword('manan#gmail.com')}))})
The widget function:
Future<Widget> resetPassword(email) async {
try{
await FirebaseAuth.instance.sendPasswordResetEmail(email: email)
return AlertDialog(
///the content of dialog)
}on FirebaseAuthException catch (e) {
return AlertDialog(
///the content of dialog)
}}
Surprisingly the email of reset password was successfully sent.
Disclaimer: I am new to Flutter, hopefully sifus can considerate it.
When you're working with dialogs in general you have to wrap it with showDialog() method, like:
await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Center(child: Text('Reset password')),
content: Builder(
builder: (context) {
return Container(child: ForgotPasswordForm());
},
),
);
},
);
Secondly, I see that you have nested Alert Dialog widgets and I think you should restructure this.
Trying to navigate to a new screen using Navigator.push(), but it's not working.
I have created a custom class to show AlertDialog and call the class with the object to show alertDialog
_customerAlertDialog.showConfirmAlertDialog(
context: context,
title: "Login In",
subTitle: "You need to login to purchase.",
onTapResponse: (bool val) async {
if (val) {
/// close AlertDialog
Navigator.of(context).pop();
Navigator.of(context).push(MaterialPageRoute(builder: (context) => LoginScreen()));
print("show the login screen");
} else {
//TODO : when user click no.
}
});
navigator.pop() is working,
print statement is working,
but Navigator.push is not working. Also tried this:
Navigator.push(context,MaterialPageRoute(builder: (context) => LoginScreen()));
The context object that you use in Navigator.of(context).pop() isn't aware of the dialog.
If your custom alert dialog is calling showDialog, consider passing on the BuildContext object that is returned by the builder:
showDialog(
context: context,
builder: (BuildContext ctx) {
// ctx is a context object that will be aware of the dialog
// consider passing this along to onTapResponse as an argument
},
);
Then you can use that BuildContext to get the navigator that will be able to close the dialog:
onTapResponse: (BuildContext ctx, bool val) async {
if (val) {
// close AlertDialog
Navigator.of(ctx).pop();
Navigator.of(ctx).push(MaterialPageRoute(builder: (context) => LoginScreen()));
print("show the login screen");
} else {
//TODO : when user click no.
}
}
I want to show a dialog if I receive an error in a futurebuilder.
If I receiver an error, I want to show a dialog and force the user to click on the button, so that he can be redirected to another page.
The problems seems to be that it is not possible to show a dialog while widget is being built.
FutureBuilder(
future: ApiService.getPosts(),
builder: (BuildContext context, AsyncSnapshot snapShot) {
if (snapShot.connectionState == ConnectionState.done) {
if (snapShot.data.runtimeType == http.Response) {
var message =
json.decode(utf8.decode(snapShot.data.bodyBytes));
showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return AlertDialog(
content: Text(message),
actions: <Widget>[
FlatButton(
child: Text("Ok"),
onPressed: () => null",
)
],
);
});
}
return ListView.separated(
separatorBuilder: (BuildContext context, int index) {
return Divider(
color: Colors.grey,
height: 1,
);
},
itemBuilder: (BuildContext context, int index) {
return _buildPostCard(index);
},
itemCount: snapShot.data.length,
);
return Center(
child: CircularProgressIndicator(),
);
},
)
If I return the AlertDialog alone, it works. But I need the showDialog because of the barrierDismissible property.
Does any one know if that is possible?
Also, is this a good way to handle what I want?
Thanks
UPDATE
For further reference, a friend at work had the solution.
In order to do what I was looking for, I had to decide which future I was going to pass to the futureBuilder.
Future<List<dynamic>> getPostsFuture() async {
try {
return await ApiService.getPosts();
} catch (e) {
await showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return AlertDialog(
content: Text(message),
actions: <Widget>[
FlatButton(
child: Text("Ok"),
onPressed: () => null",
)
],
);
});
}
}
}
Then in the futureBuilder I would just call
FutureBuilder(
future: getPostsFuture(),
Thanks
To avoid setState() or markNeedsBuild() called during build error when using showDialog wrap it into Future.delayed like this:
Future.delayed(Duration.zero, () => showDialog(...));
setState() or markNeedsBuild() called during build.
This exception is allowed because the framework builds parent widgets before its children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
So to avoid that Future Callback is used, which adds a call like this EventQueue.
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
Future futureCall() async {
await Future.delayed(Duration(seconds: 2));
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: futureCall(),
builder: (_, dataSnapshot) {
if (dataSnapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else {
Future(() { // Future Callback
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Employee Data'),
content: Text('Do you want to show data?'),
actions: <Widget>[
FlatButton(
onPressed: () =>
Navigator.of(context).pop('No'),
child: Text('NO')),
FlatButton(
onPressed: () =>
Navigator.of(context).pop('Yes'),
child: Text('YES'))
],
));
});
return Container();
}
},
);
}
}
The builder param expects you to return a Widget. showDialog is a Future.
So you can't return that.
You show Dialog on top of other widgets, you can't return it from a build method that is expecting a widget.
What you want can be implemented the following way.
When you receive an error, show a dialog on the UI and return a Container for the builder. Modify your code to this:
if (snapShot.data.runtimeType == http.Response) {
var message =
json.decode(utf8.decode(snapShot.data.bodyBytes));
showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return AlertDialog(
content: Text(message),
actions: <Widget>[
FlatButton(
child: Text("Ok"),
onPressed: () => null",
)
],
);
});
return Container();
}