Flutter自定义加载对话框

在做flutter开发的时候,找了一些类似于ios中 MBProgressHUD,SVProgressHUD第三方的加载对话框,但是在使用的时候总有一些莫名其妙的问题,或者是不能满足自己的需求,所以自己定义了一个适用于自己项目的对话框
  • 代码如下
import 'package:flutter/material.dart';

enum ProgressHUDType {
  success,
  failure,
  loading,
  none,
}

class PSYProgressHUD extends StatelessWidget {
  //对话框类型
  final ProgressHUDType type;
  //子布局
  final Widget child;
  //是否显示对话框
  final bool isShow;
  //对话框文字
  final String label;

  PSYProgressHUD({
    Key key,
    @required
    this.type,
    @required
    this.isShow,
    @required
    this.child,
    this.label = '',
  }) : super(key: key);


  @override
  Widget build(BuildContext context) {

    List<Widget> list = [];
    list.add(child);
    if (isShow) {
      Widget animationWidget;

      if (type == ProgressHUDType.success || type == ProgressHUDType.failure) {
        final childList = <Widget>[];
        if (label.length > 0) {
          childList.add(Image.asset(type == ProgressHUDType.success ? 'assets/images/success.png' : 'assets/images/error.png'));
          childList.add(SizedBox(height: 10));
          childList.add(Text(label,style: TextStyle(color: Colors.white)));
        } else {
          childList.add(Image.asset(type == ProgressHUDType.success ? 'assets/images/success.png' : 'assets/images/error.png'));
        }
        animationWidget = Center(
          child: Container(
            padding: EdgeInsets.fromLTRB(30, 10, 30, 10),
            decoration: BoxDecoration(
              color: Colors.black45,
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: childList,
            ),
          ),
        );
      } else if (type == ProgressHUDType.loading) {
        final childList = <Widget>[];
        if (label.length > 0) {
          childList.add(CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.white)));
          childList.add(SizedBox(height: 10));
          childList.add(Text(label,style: TextStyle(color: Colors.white)));
        } else {
          childList.add(CircularProgressIndicator(backgroundColor: Colors.white));
        }

        animationWidget = Center(
          child: Container(
            padding: EdgeInsets.all(20.0),
            decoration: BoxDecoration(
              color: Colors.black45,
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: childList,
            ),
          ),
        );
      } else {
        animationWidget = Center(
          child: Container(
            padding: EdgeInsets.all(20.0),
            decoration: BoxDecoration(
              color: Colors.black45,
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(label,style: TextStyle(color: Colors.white)),
              ],
            ),
          ),
        );
      }

      final model = [
        Opacity(
          child: Container(
            color: Colors.black87,
          ),
          opacity: 0.6,
        ),
        animationWidget
      ];
      list += model;
    }
    return Stack(
      children: list,
    );
  }
}


  • 使用方式如下

  
  @override
  Widget build(BuildContext context) {

    return Scaffold(
        body: PSYProgressHUD(
          isShow: _isShow,
          type: type,
          label: label,
          child: Center(
            child: Padding(
              padding: EdgeInsets.all(40),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  FlatButton (
                    child: Text('loading'),
                    onPressed: _loading,
                  ),
                  FlatButton (
                    child: Text('success'),
                    onPressed: _success,
                  ),
                  FlatButton (
                    child: Text('failure'),
                    onPressed: _failure,
                  ),
                  FlatButton (
                    child: Text('none'),
                    onPressed: _none,
                  ),
                ],
              ),
            ),
          ),
        )
    );
  }
 _loading() async{
    setState(() {
      _isShow = true;
      label = 'loading...';
      type = ProgressHUDType.loading;
    });
  }

  _success() async{
    setState(() {
      _isShow = true;
      label = 'success';
      type = ProgressHUDType.success;
    });
    await Future.delayed(Duration(seconds: 1),(){
      setState(() {
        _isShow = false;
      });
      Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => PaperPage()
      ));
    });
  }

  _failure() async{
    setState(() {
      _isShow = true;
      label = 'failure';
      type = ProgressHUDType.failure;
    });
    await Future.delayed(Duration(seconds: 1),(){
      setState(() {
        _isShow = false;
      });
    });
  }

  _none() async{
    setState(() {
      _isShow = true;
      label = 'done';
      type = ProgressHUDType.none;
    });
    await Future.delayed(Duration(seconds: 1),(){
      setState(() {
        _isShow = false;
      });
    });
  }

gif没有,放几张静态图片感受一下效果:
loading

success

failure

done
ok! it's over
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容