Flutter自定义一个加载动画

小灰灰 2021-11-14 13:24 831阅读 0赞

先上效果图：

![20190731212209531.gif][]

自定义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即可：

![2019080110564422.png][]

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

![20190801103851796.gif][]

修改后的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妹纸需要什么的样式，修改一下布局就好

[20190731212209531.gif]: /images/20211114/b09a048d719a40e29660cb1d18b1f8c9.png
[2019080110564422.png]: /images/20211114/996c4964f0a64d93b4dcb16d4ae9d8da.png
[20190801103851796.gif]: /images/20211114/03dad0a747184bccb1287c07712c8f46.png