flutter的加载弹框

代码组件:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:zhongfa_apps/services/ScreenAdapter.dart';

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

  ///展示  {Widget child = const CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.red),)}
  static void showProgress(BuildContext context) {
    if (!_isShowing) {
      _isShowing = true;
      Navigator.push(
        context,
        _PopRoute(
          child: _Progress(
            child: new Padding(
              padding: const EdgeInsets.all(12.0),
              child: new Center(
                //保证控件居中效果
                child: new SizedBox(
                  width: 120.0,
                  height: 120.0,
                  child: new Container(
                    decoration: ShapeDecoration(
                      color: Colors.black54,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(
                          Radius.circular(8.0),
                        ),
                      ),
                    ),
                    child: new Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        new CircularProgressIndicator(
                          backgroundColor: Colors.white,
                          strokeWidth: 4.0,
                          valueColor:
                              new AlwaysStoppedAnimation(Colors.black38),
                        ),
                        new Padding(
                          padding: const EdgeInsets.only(
                            top: 20.0,
                          ),
                          child: new Text(
                            "加载中...",
                            style: new TextStyle(
                                fontSize: ScreenAdapter.size(32),
                                color: Colors.white),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      );
    }
  }

  ///隐藏
  static void hideProgress(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;
}

页面调用:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:zhongfa_apps/widget/public/ProgressDialog.dart';

class Test003 extends StatefulWidget {
  Test003({Key key}) : super(key: key);

  @override
  _Test003State createState() => _Test003State();
}

class _Test003State extends State<Test003> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("测试页面"),
      ),
      body: Container(
        child: InkWell(
          onTap: () {
            ProgressDialog.showProgress(context);
            print("打印");
            Timer _timer;
            _timer = Timer.periodic(Duration(seconds: 5),(res){
              ProgressDialog.hideProgress(context);
              _timer.cancel();

            });
          },
          child: Text("加载",style: TextStyle(
            fontSize: 32
          )),
        ),
      ),
    );
  }
}

 

posted @ 2019-11-28 18:24  生如逆旅,一苇以航  阅读(1792)  评论(0编辑  收藏  举报