How to dismiss a Dialog alert widget automatically in Flutter?

Question

Forgive me if its a noob question or the code seems too basic, I am new to flutter. I have done my fair share of googling but i havent been able to find a solution.

As soon as the future function starts, i want to show the Loading alert. When the API request/response is processed, if an error has occurred it should be shown in showErrorDialog, and the LoadingDialog should be dismissed automatically.

Right now, ErrorDialog shows and can be dismissed with its button, but then LoadingDialog does not get dismissed.

I can do it with Future.delayed but that is simply a work around has has too many variable outcomes. Here is dummy code:

import 'package:flutter/material.dart';

class RandomScreen extends StatefulWidget {
  @override
  _RandomScreenState createState() => _RandomScreenState();
}

class _RandomScreenState extends State<RandomScreen> {

  Future<void> _submitApiRequest() async {
    try {
      _showLoadingAlert();

      //processing the API request/response here.

    } catch (error) {
      _showErrorDialogue(error.toString());
    }
  }

  void _showErrorDialogue(String errorMessage) {
    showDialog(
      context: context,
      builder: (ctx) => Dialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
        child: Column(
          children: <Widget>[
            Text(errorMessage),
            FlatButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text(
                'Dismiss',
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _showLoadingAlert() {
    showDialog(
      context: context,
      builder: (ctx) => CircularProgressIndicator(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Random Screen'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: _submitApiRequest,
          child: Text('Submit'),
        ),
      ),
    );
  }
}

Relatable, Please check the answer. https://stackoverflow.com/a/60760433/7532298 — Suman Maharjan, Mar 19 '20 at 16:04
Wow, all i had to do was pop it before showing the next dialog. Glad to see i was just overthinking. Thanks @SumanMaharjan, that solved my issue. — Hassan Hammad, Mar 23 '20 at 09:55
of course, i did it but my reputation is low yet, so it wont show — Hassan Hammad, Mar 23 '20 at 10:04

score 0 · Answer 1 · answered Mar 19 '20 at 19:57

The Way you are trying to do might not be the best way in case you are trying to call API and show a loading screen . I would recommend you to use ModalProgressHud

This will show a loader while you are trying to do API call and once API response received you can hide the loader using a state variable.

In case you still want to do using alert box , you need to call Navigator.pop as mentioned in documentation.

If the application has multiple Navigator objects, it may be necessary to call Navigator.of(context, rootNavigator: true).pop(result) to close the dialog rather than just Navigator.pop(context, result).

I have already seen this answer somewhere, and it seems like a little too complex an approach. The comment on my question by @Suman Maharjan gave me the optimum solution for my case. Thanks for taking the time to reply though :) — Hassan Hammad, Mar 23 '20 at 09:56

How to dismiss a Dialog alert widget automatically in Flutter?

1 Answers1