Flutter : Show an Alert Dialog after an async Api call

Question

This is the code to get the Login response. If there is an error I want to show an Alert dialog saying that there was an error during Login.

Future<String> login(String username, String password) async {
    Map<String, dynamic> params = {
       'username': username,
       'password': password,
    };

    final response = await http.post('apiurl', body: params);

    if (response.statusCode != 200)
       throw Exception(response.body);

    return response.body;
}

I'm adding the code from where the call to login happens. There is a TODO in the _loginController where I want to Show an Alert Dialog which shows the error.

class LoginWidgetState extends State<LoginWidget> {
  var _usernameController = new TextEditingController();

  var _passwordController = new TextEditingController();

  void _loginButtonClickHandler() {
    var username = _usernameController.text;
    var password = _passwordController.text;

    login(username, password).then((response) {

    }).catchError((e) {
      //TODO : show an Alert Here
    });
  }

  @override
  Widget build(BuildContext context) {
    var container = Center(
      child: Container(
    child: Column(
      children: <Widget>[
        TextField(
          decoration: InputDecoration(
            hintText: "username",
          ),
          controller: _usernameController,
        ),
        TextField(
          obscureText: true,
          decoration: InputDecoration(hintText: "password"),
          controller: _passwordController,
        ),
        RawMaterialButton(
          onPressed: _loginButtonClickHandler,
          child: Text("Login"),
        )
       ],
     ),
    ),
   );

   return container;
  }

}

Suragch · Answer 1 · 2020-02-26T07:39:21.130

To give more context to the accepted answer...

If you make a remote API call like this:

login(username, password).then((response) {

}).catchError((e) {
  //TODO : show an Alert Here
});

then you can replace the TODO with this (if you are calling it from a button click):

_showAlertDialog(context);

Or this (if you are calling it from within a build() method or initState():

WidgetsBinding.instance.addPostFrameCallback((_) => _showAlertDialog(context));

Where the method is defined as

void _showNewVersionAvailableDialog(BuildContext context) {
  final alert = AlertDialog(
    title: Text("Error"),
    content: Text("There was an error during login."),
    actions: [FlatButton(child: Text("OK"), onPressed: () {})],
  );

  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

Notes

You need to have a reference to the BuildContext.
For more info about addPostFrameCallback, read this article.

This is great. Thank you very much – Vitaliy-T Dec 24 '20 at 21:50 — Vitaliy-T, Dec 24 '20 at 21:50

score 1 · Accepted Answer · answered Aug 14 '18 at 17:09

1

Refer here to show the dialog.

Send context to _loginButtonClickHandler and you are done. Cheers

answered Aug 14 '18 at 17:09

Dinesh Balasubramanian

20,532
7
64
57

score 0 · Answer 3 · edited May 07 '20 at 02:19

0

This will help you!

  Future<String> login(String username, String password) async {
    Map<String, dynamic> params = {
       'username': username,
       'password': password,
    };

    final response = await http.post('apiurl', body: params);

    if (response.statusCode != 200)
    {
      throw Exception(response.body);
    }
    else 
    {
      showWhateverFunction();
    }
    return response.body;
}

edited May 07 '20 at 02:19

Avijit Nagare

8,482
7
39
68

answered Aug 14 '18 at 13:42

goops17

1,152
10
18

I want to have common method to make an Api call. In that case I just want to throw the Exception and leave it to the caller to handle it accordingly. – Anup Ammanavar Aug 14 '18 at 15:25
then try try catch! – goops17 Aug 14 '18 at 15:56
I'm already throwing it. I just need to complete the TODO part – Anup Ammanavar Aug 15 '18 at 03:25

score 0 · Answer 4 · answered Dec 20 '18 at 16:08

You can use RFlutter Alert library for that. It is easily customizable and easy-to-use alert/popup dialog library for Flutter. I hope it will help you.

Example alert with RFlutter Alert:

Alert(context: context, title: "RFLUTTER", desc: "Flutter is awesome.").show();

*I'm one of developer of RFlutter Alert.

Flutter : Show an Alert Dialog after an async Api call

4 Answers4

Notes