How to handle a few-seconds-long update from within a DialogBox in Flutter?

Viewed 19

My app exposes a dialog box that serves as a single value to be edited by the user.

enter image description here

Once the new value is validated, it has to be transmitted via BLE to the remote device which transmit it via UART to the final device which actually do the update and, once done, the device reports back the update completion result to the app so that the user is kept posted of about it.

As you can imagine, the update round trip takes a few seconds, and this is why I'd like to replace the edit field by a circular progress indicator during the process.

In order to first design the overall UX architecture, I replaced the update process by a 10-second sleep. Running the code, shows the dialog is not actually show up on screen: I mean the progress indicator never shows up, only the dialog box stay still.

So I would be very grateful someone help me in the process.

And of course, I am open to a better way to do that.

My current stateful widget code snippet is as follows:


  bool isUpdating = false;

  /// Sets the error state with the given message
  void setUpdating() {
    setState(() {
      isUpdating = true;
    });
  }

  void clearUpdating() {
    setState(() {
      isUpdating = false;
    });
  }

  /// Change the state for the open a dialog box to redraw and show updating has begin
  /// and in parallel starts the actual update process that takes time
  Future<void> updateValue(void callback()) async {
    setUpdating();
    actuallyUpdateValue(callback);
  }

  /// Open a dialog box to edit the value
  Future<void> actuallyUpdateValue(void callback()) async {
    await Future.delayed(Duration(seconds: 10));
    // showDialog(
    //     barrierDismissible: false, // Don' close on tap oustide
    //     context: context,
    //     builder: (builder) => AlertDialog(
    //         title: Text(widget.title),
    //         content: Column(
    //             mainAxisSize: MainAxisSize.min,
    //             crossAxisAlignment: CrossAxisAlignment.stretch,
    //             children: [
    //               Text("Updating the value, please wait…"),
    //             ])));

    clearUpdating();
    callback();
  }

  /// Open a dialog box to edit the value
  void edit(BuildContext context) {
    clearError();

    final sChangeValue = widget.unit == null
        ? 'Change value:'
        : "Change, unit is \"${widget.unit!}\":";

    showDialog(
        barrierDismissible: false, // Don' close on tap oustide
        context: context,
        builder: (builder) => isUpdating
            ? AlertDialog(
                title: Text(widget.title),
                content: SingleChildScrollView(
                    child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        children: [
                      Text(sChangeValue,
                          style: Theme.of(context).textTheme.caption),
                      Center(child: CircularProgressIndicator())
                    ])))
            : AlertDialog(
                title: Text(widget.title),
                content: SingleChildScrollView(
                    child: Column(
    // etc.
                    
0 Answers
Related