flutter弹框怎么封装_flutter入门之封装一个加载控件LoadingDialog

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

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

由于这个内容比较简单，我们先看一下代码：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接口，比如说我们配合

以下是图二的使用代码：

ProgressDialog.showProgress(context, child: SpinKitFadingCircle(

itemBuilder: (_, int index) {

return DecoratedBox(

decoration: BoxDecoration(

color: index.isEven ? Colors.red : Colors.green,

),

);

},

));

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

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