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.
Related
I have a showDialog called inside FloatingActionButton, I want to dismiss the showDialog when the back button is clicked, but it is returned to the previous page without dismiss
MyCode
FloatingActionButton(
onPressed: () async {
await showDialog(
context: context,
// useRootNavigator: false,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Dialog"),
........)
Because you are passing the wrong context of the page. I had the same issue today i solved it by doing
FloatingActionButton(
onPressed: () async {
await showDialog(
context: context,
// useRootNavigator: false,
builder: (BuildContext dialogContext) {
return AlertDialog(
title: Text("Dialog"),
........)
and then i popped the dialog with the dialogContext
Navigator.of(dialogContext).pop();
In Flutter,
I used FutureBuilder to display data from API.
I would like to popup an error dialog when there's error.
However, it throws error when I called showDialog()
setState() or markNeedsBuild() called during build.
Here's my code
return FutureBuilder(
future: xxx,
builder: (context, snapshot) {
if (snapshot.hasData) {
//DO SOMETHING
} else if (snapshot.hasError) {
//TODO: Show Error
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Error"),
content: Text("HAHAHA"),
actions: <Widget>[
FlatButton(
child: Text("No"),
),
FlatButton(
child: Text("Yes")
),
],
);
}
);
return Container();
} else {
//DO SOMETHING
}
},
Please help to advise how could I showDialog in FutureBuilder.
We can not call setState, navigate or showDialog while build method is building widget. so, we can wait for a microsecond and meanwhile build method complete building widget, so we can show dialog.
Create a method like below.
showError() async {
await Future.delayed(Duration(microseconds: 1));
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Error"),
content: Text("HAHAHA"),
actions: <Widget>[
FlatButton(
child: Text("No"),
),
FlatButton(child: Text("Yes")),
],
);
});
}
And call this method Where you want to show dialog.
We have a Flutter dialog that when we click Ok and it sends the user home... the dialog lingers on the screen even after sending them home and then goes away which is annoying.
Here is the code for the dialog:
Future<void> _requestSupportDialog(BuildContext context, User user, Features features) {
return showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Success! You have been entered into the support queue'),
content: const Text('Support it on its way'),
actions: <Widget>[
FlatButton(
child: Text('Ok'),
onPressed: () {
// Send them HOME.
Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new FlutterReduxApp(user: user, features: features)));
},
),
],
);
},
);
}
Navigator.of(context, rootNavigator: true).pop();
Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (BuildContext context)=>Home(son: 0,)));
Before pushing to a new route, try to pop first to dismiss the dialog.
Navigator.of(context).pop()
Navigator.of(context, rootNavigator: true).pop();
Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (BuildContext context)=>Home(son: 0,)));
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();
}
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 = '';
});
}