flutter：如何在登錄前顯示加載動畫？

Question

我正在處理顫振。 在我輸入我的ID和密碼后，我想在進入主頁之前顯示一個log in animation 。 我使用dialog但我覺得我的代碼非常生硬並且有潛在的錯誤。 有更好的解決方案嗎？

// 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

您可以使用pub.dev 中的庫，例如loading_overlay

或者您可以構建自己的加載小部件，例如：

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

請按照這個(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

我建議使用FutureBuilder 。 還有一些默認加載小部件，如CircularProgressIndicator()可以在進行時使用。

因為登錄是某種異步進程，您可以像下面這樣使用 FutureBuilder：

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();

    }
  }
)

如果你需要更多花哨的加載指示器，你可以查看這個包flutter_spinkit