flutter - how to show a CircularProgressIndicator within a rflutter_alert dialog

Question

I have the following code. When the user clicks the Save button, a web service is run. How would I show the CircularProgressIndicator inside the rflutter_alert dialog while the service is running? If the web service fails, I would like the alert dialog to remain open so they can try again.

Thanks,

Paul

Future<bool> saveRequest({context, int rId}) {
  String _reason = '';
  GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  TextEditingController reasonController = TextEditingController();

  TextStyle _style = TextStyle(
      fontFamily: 'Montserrat', fontSize: 18.0, fontWeight: FontWeight.normal);

  InputDecoration _textFormFieldDecoration({String hintText, double padding}) =>
      InputDecoration(
        //contentPadding: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 8.0),
        contentPadding: EdgeInsets.all(padding),
        isDense: true,
        hintText: hintText,
        hintStyle: TextStyle(color: kHintText),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(5)),
        ),
      );

  return Alert(
    context: context,
    title: 'New Request',
    //desc: 'Reason',
    content: Form(
     key: _formKey,
     child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        SizedBox(height: 20.0),
        Text('Reason', textAlign: TextAlign.left, style: _style),
        SizedBox(height: 10.0),
        TextFormField(
          validator: (value) {
            if (value.isEmpty) {
              return "please enter reason";
            }
            return null;
          },
          onSaved: (value) {
            _reason = value;
          },
          decoration: _textFormFieldDecoration(
            hintText: 'reason for request',
            padding: 8.0,
          ),
          controller: reasonController,
        ),
        SizedBox(height: 10.0),
      ],
     ),
    ),
    buttons: [
      DialogButton(
        child:
            Text('Save', style: TextStyle(color: Colors.white, fontSize: 20)),
        color: kMainColor,
        onPressed: () async {
          if (_formKey.currentState.validate()) {
            _formKey.currentState.save();
            var saved = await doSaveRequest(pReason: _reason);
            Navigator.pop(context, false);
            if (saved.savedOK) {
              Navigator.of(context).pop();
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => UserRequests(
                    rId: rId,
                  ),
                ),
              );
            } else {
              Navigator.pop(context, false);
            }
          }
        },
      ),
      DialogButton(
        child:
            Text('Cancel', style: TextStyle(color: Colors.white, fontSize: 20)),
        color: kMainColor,
        onPressed: () {
          Navigator.pop(context, false);
        },
      ),
    ],
  ).show();
}

Answer 1

You can copy paste run full code below

Step 1: The following code use 3 seconds delay to simulate doSaveRequest()
Step 2: You can use StreamBuilder<bool> and use _events.add(true); before doSaveRequest() to show CircularProgressIndicator()
Step 3: back to Form screen with _events.add(false);

code snippet

Future<bool> doSaveRequest({String pReason}) async {
    await Future.delayed(const Duration(seconds: 3), () {});
    print("3 secs");
    return false;
  }

return Alert(
      context: context,
      title: 'New Request',
      //desc: 'Reason',
      content: StreamBuilder<bool>(
          initialData: false,
          stream: _events.stream,
          builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
            print(" ${snapshot.data.toString()}");
            return snapshot.data
                ? CircularProgressIndicator()
                : Form(
                    key: _formKey,  
    ...
    onPressed: () async {
                if (_formKey.currentState.validate()) {
                  ...
                  _events.add(true);

                  var saved = await doSaveRequest(pReason: _reason);
                  if (saved) {
                    Navigator.pop(context, false);
                  } else {
                    _events.add(false);
                  }     

working demo

full code

import 'package:flutter/material.dart';
import 'package:rflutter_alert/rflutter_alert.dart';
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  Color kMainColor = Colors.blue;
  Color kHintText = Colors.blue;
  StreamController<bool> _events;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  initState() {
    super.initState();
    _events = new StreamController<bool>();
  }

  Future<bool> doSaveRequest({String pReason}) async {
    await Future.delayed(const Duration(seconds: 3), () {});
    print("3 secs");
    return false;
  }

  Future<bool> saveRequest({context, int rId}) {
    String _reason = '';
    GlobalKey<FormState> _formKey = GlobalKey<FormState>();

    TextEditingController reasonController = TextEditingController();

    TextStyle _style = TextStyle(
        fontFamily: 'Montserrat',
        fontSize: 18.0,
        fontWeight: FontWeight.normal);

    InputDecoration _textFormFieldDecoration(
            {String hintText, double padding}) =>
        InputDecoration(
          //contentPadding: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 8.0),
          contentPadding: EdgeInsets.all(padding),
          isDense: true,
          hintText: hintText,
          hintStyle: TextStyle(color: kHintText),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(5)),
          ),
        );

    return Alert(
      context: context,
      title: 'New Request',
      //desc: 'Reason',
      content: StreamBuilder<bool>(
          initialData: false,
          stream: _events.stream,
          builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
            print(" ${snapshot.data.toString()}");
            return snapshot.data
                ? CircularProgressIndicator()
                : Form(
                    key: _formKey,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        SizedBox(height: 20.0),
                        Text('Reason',
                            textAlign: TextAlign.left, style: _style),
                        SizedBox(height: 10.0),
                        TextFormField(
                          validator: (value) {
                            if (value.isEmpty) {
                              return "please enter reason";
                            }
                            return null;
                          },
                          onSaved: (value) {
                            _reason = value;
                          },
                          decoration: _textFormFieldDecoration(
                            hintText: 'reason for request',
                            padding: 8.0,
                          ),
                          controller: reasonController,
                        ),
                        SizedBox(height: 10.0),
                      ],
                    ),
                  );
          }),
      buttons: [
        DialogButton(
          child:
              Text('Save', style: TextStyle(color: Colors.white, fontSize: 20)),
          color: kMainColor,
          onPressed: () async {
            if (_formKey.currentState.validate()) {
              _formKey.currentState.save();
              print(_reason);

              _events.add(true);

              var saved = await doSaveRequest(pReason: _reason);
              if (saved) {
                Navigator.pop(context, false);
              } else {
                _events.add(false);
              }
              /*if (saved.savedOK) {
                Navigator.of(context).pop();
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => UserRequests(
                      rId: rId,
                    ),
                  ),
                );
              } else {
                Navigator.pop(context, false);
              }*/
            }
          },
        ),
        DialogButton(
          child: Text('Cancel',
              style: TextStyle(color: Colors.white, fontSize: 20)),
          color: kMainColor,
          onPressed: () {
            Navigator.pop(context, false);
          },
        ),
      ],
    ).show();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('Alert'),
              onPressed: () {
                saveRequest(context: context, rId: 123);
              },
            ),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}