官方没有提供加载中的组件, 我们可以自己封装一个：

  1. import 'dart:async';
  2. import 'package:flutter/material.dart';
  3. import 'package:fluttertoast/fluttertoast.dart';
  5. // ignore: must_be_immutable
  6. class NetLoadingDialog extends StatefulWidget {
  7.   String loadingText;
  8.   bool outsideDismiss; // 是否可以点击消失, 默认false
  9.   Function dismissCallback; // 消失后的回调
  10.   Future<dynamic> requestCallBack; // 请求回调, 一定要传, 否则loading不会消失
  12.   NetLoadingDialog(
  13.       {Key key,
  14.         this.loadingText = "loading...",
  15.         this.outsideDismiss = false,
  16.         this.dismissCallback,
  17.         this.requestCallBack})
  18.       : super(key: key);
  20.   @override
  21.   State<NetLoadingDialog> createState() => _LoadingDialog();
  22. }
  24. class _LoadingDialog extends State<NetLoadingDialog> {
  25.   _dismissDialog() {
  26.     if (widget.dismissCallback != null) {
  27.       widget.dismissCallback();
  28.     }
  29.     // 隐藏Loading
  30.     Navigator.of(context).pop();
  31.   }
  33.   @override
  34.   void initState() {
  35.     super.initState();
  36.     if (widget.requestCallBack != null) {
  37.       widget.requestCallBack.then((_) {
  38.         // 请求成功后隐藏Loading
  39.         Navigator.pop(context);
  40.       }).catchError((err) {
  41.         // 请求失败后隐藏Loading
  42.         Navigator.pop(context);
  43.         // 吐司提示错误原因
  44.         Fluttertoast.showToast(
  45.             msg: "请求失败: $err",
  46.             toastLength: Toast.LENGTH_SHORT,
  47.             gravity: ToastGravity.CENTER,
  48.             timeInSecForIos: 1,
  49.             backgroundColor: Colors.grey,
  50.             textColor: Colors.white,
  51.             fontSize: 16.0
  52.         );
  53.       });
  54.     }
  55.   }
  57.   @override
  58.   Widget build(BuildContext context) {
  59.     return new GestureDetector(
  60.       onTap: widget.outsideDismiss ? _dismissDialog : null, // 是否可以通过点击让loading消失
  61.       child: Material(
  62.         type: MaterialType.transparency,
  63.         child: new Center(
  64.           child: new SizedBox(
  65.             width: 120.0,
  66.             height: 120.0,
  67.             child: new Container(
  68.               decoration: ShapeDecoration(
  69.                 color: Color(0xffffffff),
  70.                 shape: RoundedRectangleBorder(
  71.                   borderRadius: BorderRadius.all(
  72.                     Radius.circular(8.0),
  73.                   ),
  74.                 ),
  75.               ),
  76.               child: new Column(
  77.                 mainAxisAlignment: MainAxisAlignment.center,
  78.                 crossAxisAlignment: CrossAxisAlignment.center,
  79.                 children: <Widget>[
  80.                   new CircularProgressIndicator(), // 加载动画
  81.                   new Padding(
  82.                     padding: const EdgeInsets.only(
  83.                       top: 20.0,
  84.                     ),
  85.                     child: new Text(
  86.                       widget.loadingText,
  87.                       style: new TextStyle(fontSize: 12.0),
  88.                     ),
  89.                   ),
  90.                 ],
  91.               ),
  92.             ),
  93.           ),
  94.         ),
  95.       ),
  96.     );
  97.   }
  98. }

使用方式：

  1. // 重点就是实现返回Future的方法, 无论成功与否, 都要返回Future, 否则loading不会消失
  2. Future<dynamic> _register() {
  3.   Future<dynamic> future = HttpUtil().resolve(Api.code);
  4.   future.then((res) {
  5.     print('成功啦');
  6.   }).catchError((err) {
  7.     print('失败啦');
  8.   });
  9.   return future;
  10. }
  12. // 通过showDialog调用显示Loading
  13. showDialog(
  14.   context: context,
  15.   barrierDismissible: false,
  16.   builder: (_) {
  17.     return new NetLoadingDialog(
  18.       loadingText: '加载中...',
  19.       requestCallBack: _register(), // 传入一个返回Future的方法
  20.     );
  21.   });

当然, loading图不一定要使用 CircularProgressIndicator, 也可以使用第三方库, 有一些很不错的库：

参考资料