flutter入门之封装一个加载控件Loading Dialog

    日常开发中，我们经常会遇到一些耗时加载的应用场景，为了给用户提示，所以我们常常会在加载的时候展示一个加载框，给用户带来较好的体验。

    今天我们的内容是封装一个简单易用的加载控件，首先来看一下效果。 

    由于这个内容比较简单，我们先看一下代码：dialog.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///加载弹框
class ProgressDialog {
  static bool _isShowing = false;

  ///展示
  static void showProgress(BuildContext context,
      {Widget child = const CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.red),)}) {
    if(!_isShowing) {
      _isShowing = true;
      Navigator.push(
        context,
        _PopRoute(
          child: _Progress(
            child: child,
          ),
        ),
      );
    }
  }

  ///隐藏
  static void dismiss(BuildContext context) {
    if (_isShowing) {
      Navigator.of(context).pop();
      _isShowing = false;
    }
  }
}

///Widget
class _Progress extends StatelessWidget {
  final Widget child;

  _Progress({
    Key key,
    @required this.child,
  })  : assert(child != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
        color: Colors.transparent,
        child: Center(
          child: child,
        ));
  }
}

///Route
class _PopRoute extends PopupRoute {
  final Duration _duration = Duration(milliseconds: 300);
  Widget child;

  _PopRoute({@required this.child});

  @override
  Color get barrierColor => null;

  @override
  bool get barrierDismissible => true;

  @override
  String get barrierLabel => null;

  @override
  Widget buildPage(BuildContext context, Animation animation,
      Animation secondaryAnimation) {
    return child;
  }

  @override
  Duration get transitionDuration => _duration;
}

    大家可以直接copy以上代码到自己的项目中即可使用该控件。

    具体是通过PopupRoute结合Dialog Widget的方式来实现的，有关PopupRoute的内容，请见我的另一篇博客：flutter入门之使用PopupRoute自定义实现PopupWindow功能

    使用的时候只需要调用ProgressDialog.showProgress(context)即可展示进度框，调用ProgressDialog.dismiss(context)隐藏进度框，为了避免多次重复调用，我们新增了一个_isShowing 变量。同时为了方便扩展，我们对外开放了一个Widget类型的child接口，比如说我们配合flutter_spinkit可以非常容易的展示一些比较漂亮的样式。

   以下是图二的使用代码：

              ProgressDialog.showProgress(context, child: SpinKitFadingCircle(
                itemBuilder: (_, int index) {
                  return DecoratedBox(
                    decoration: BoxDecoration(
                      color: index.isEven ? Colors.red : Colors.green,
                    ),
                  );
                },
              ));

可以看到，ProgressDialog是一个非常轻量非常方便的widget控件。

 

虽然代码已经在文章中罗列完了，但是还是给了一个链接，方便大家自取运行。

https://github.com/jadennn/flutter_loading_dialog

 

感谢flutter_spinkit