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<double> animation,
      Animation<double> 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