flutter: how to show loading animation before log in?

Question

I'm working with flutter. After I input my id and password, I want to show a log in animation before entering the home page. I use a dialog but I feel like my code is very blunt and has potential bugs. Is there a better solution?

// this part is for the input content is legal
else {
        showDialog(
            context: context,
            barrierDismissible: false,
            builder: (BuildContext context) {
              return LoadingStyle.buildWidget();  // this is a simple loading animation
            });
        service.createSession(context, code, id).then((response) { // log in part
          if (response != null) {
            this.saveUser(response);   // something about saving user info
          } else {
            print('null respose');
          }
        }).catchError((e) {
          if (e is GrpcError && e.code == StatusCode.unauthenticated) {
            setState(() {
              this.errorMessage = "grpc network error";
            });
          }
        }).whenComplete(() {
          Navigator.of(context).pop();  // pop dialog here, is this right?
          MyRoutersl.goNewPage(context); // enter the new page
        });
      }

Answer 1

You can use Libraries from pub.dev like loading_overlay

or you can build your own loading widget, example :

class OverlayWidget extends StatelessWidget {
  final Widget child;
  final bool isLoading;

  OverlayWidget({@required this.child, this.isLoading = false})
      : assert(child != null);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        Visibility(
          visible: isLoading,
          child: Container(
            color: Colors.grey.withOpacity(0.4),
            child: Center(
              child: Platform.isIOS
                  ? CupertinoActivityIndicator(
                      radius: 20,
                    )
                  : CircularProgressIndicator(),
            ),
          ),
        )
      ],
    );
  }
}

Answer 2

Please follow this (modal_progress_hud)

import 'package:modal_progress_hud/modal_progress_hud.dart';


......
bool _saving = false
....
@override
Widget build(BuildContext context) {
  return Scaffold(
     body: ModalProgressHUD(child: Container(
       Form(...)
     ), inAsyncCall: _saving),
  );
}

Answer 3

I suggest to use FutureBuilder . There is also some default loading Widget like CircularProgressIndicator() can be used when in progress.

Because login is some sort of Asynchronous progress, you can use FutureBuilder like below:

FutureBuilder(
  future: service.createSession(...  // Use Async function to return the result
  builder: (context, snapshot) {
    if(snapshot.hasData && snapshot.connectionState == done ){

      // return widget after login successfully
      // result should equal to snapshot.data

    } else {

      // return CircularProgressIndicator();

    }
  }
)

If you need more fancy loading indicator, you can check this package flutter_spinkit