Flutter自定义一个加载动画

先上效果图：

自定义loading.dart类

import 'package:flutter/material.dart';

class ProgressDialog extends StatelessWidget {
  //子布局
  final Widget child;

  //加载中是否显示
  final bool loading;

  //进度提醒内容
  final String msg;

  //加载中动画
  final Widget progress;

  //背景透明度
  final double alpha;

  //字体颜色
  final Color textColor;

  ProgressDialog(
      {Key key,
        @required this.loading,
        this.msg,
        this.progress = const CircularProgressIndicator(),
        this.alpha = 0.6,
        this.textColor = Colors.black,
        @required this.child})
      : assert(child != null),
        assert(loading != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Widget> widgetList = [];
    widgetList.add(child);
    if (loading) {
      Widget layoutProgress;
      if (msg == null) {
        layoutProgress = Center(
          child: progress,
        );
      } else {
        layoutProgress = Center(
          child: Container(
            padding: const EdgeInsets.all(15.0),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(4.0)),
              child: Container(
                padding: const EdgeInsets.only(left:20.0),
                alignment: Alignment.centerLeft,
                width: MediaQuery.of(context).size.width * 0.75,
                height: 50.0,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    progress,
                  Container(
                    margin: const EdgeInsets.only(left:20.0),
                    child: Text(
                      msg,
                      style: TextStyle(color: textColor, fontSize: 16.0),
                    ),
                  ),
                  ],
                ),
              ),
          ),
        );
      }
      widgetList.add(Opacity(
        opacity: alpha,
        child: new ModalBarrier(color: Colors.black87,dismissible: false,),
      ));
      widgetList.add(layoutProgress);
    }
    return Stack(
      children: widgetList,
    );
  }
}

可以随意改变样式，背景透明度，布局等。

使用方法：

body: ProgressDialog(
  loading: _loading,
  msg: '正在加载...',
  child: Center(
    child: RaisedButton(
      onPressed: () => _onRefresh(),
      child: Text('显示加载动画'),
    ),
  ),
),

调用loading的完整代码：

import 'package:flutter/material.dart';
import 'package:my_flutter/loading.dart';
import 'package:fluttertoast/fluttertoast.dart';
class LoadingDemo extends StatefulWidget {
  @override
  _LoadingDemoState createState() => _LoadingDemoState();
}

class _LoadingDemoState extends State<LoadingDemo> {
  bool _loading = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading'),
        backgroundColor: Colors.blueAccent,
      ),
      body: ProgressDialog(
        loading: _loading,
        msg: '正在加载...',
        child: Center(
          child: RaisedButton(
            onPressed: () => _onRefresh(),
            child: Text('显示加载动画'),
          ),
        ),
      ),
    );
  }

  _onRefresh() async {
    setState(() {
      _loading = !_loading;
    });
    await Future.delayed(Duration(seconds: 3), () {
      setState(() {
        _loading = !_loading;
        Fluttertoast.showToast(msg: '加载完成');
      });
    });
  }
}

注意：有个地方大家注意一下，默认点击loading周边黑色区域，当前页面会关闭，需要加一句代码：就是ModalBarrier这个组件的

dismissible属性，设置为false即可：

修改loading样式，只需修改loading.dart中的layoutProgress布局

修改后的loading.dart代码

import 'package:flutter/material.dart';

class ProgressDialog extends StatelessWidget {
  //子布局
  final Widget child;

  //加载中是否显示
  final bool loading;

  //进度提醒内容
  final String msg;

  //加载中动画
  final Widget progress;

  //背景透明度
  final double alpha;

  //字体颜色
  final Color textColor;

  ProgressDialog(
      {Key key,
        @required this.loading,
        this.msg,
        this.progress = const CircularProgressIndicator(),
        this.alpha = 0.6,
        this.textColor = Colors.black,
        @required this.child})
      : assert(child != null),
        assert(loading != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Widget> widgetList = [];
    widgetList.add(child);
    if (loading) {
      Widget layoutProgress;
      if (msg == null) {
        layoutProgress = Center(
          child: progress,
        );
      } else {
        layoutProgress = Center(
          child: Container(
            padding: const EdgeInsets.all(20.0),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(4.0)),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                progress,
                Container(
                  padding: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0),
                  child: Text(
                    msg,
                    style: TextStyle(color: textColor, fontSize: 16.0),
                  ),
                )
              ],
            ),
          ),
        );
      }
      widgetList.add(Opacity(
        opacity: alpha,
        child: new ModalBarrier(color: Colors.black87,dismissible: false,),
      ));
      widgetList.add(layoutProgress);
    }
    return Stack(
      children: widgetList,
    );
  }
}

当然UI妹纸需要什么的样式，修改一下布局就好