为了账号安全,请及时绑定邮箱和手机立即绑定

Flutter 优雅地实现一个弹窗类型的Loading

2020.11.24 19:39 388浏览

图片描述

使用方式

showDialog(
        barrierDismissible: false,
        barrierColor: Colors.transparent,
        context: context,
        builder: (BuildContext context) {
          return Center(
            child:Container(
              width: 80,height: 80,
              child:CircularProgressIndicator(
                    strokeWidth: 3.0,
                    backgroundColor: Colors.blue,
                    valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                ),
            )
          );
        });

FadeRoute类的实现

import 'package:flutter/material.dart';

class FadeRoute extends PageRoute {
  FadeRoute({
    @required this.pageBuilder,
    this.transitionDuration = const Duration(milliseconds: 300),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
  });
 
  final WidgetBuilder pageBuilder;
 
  @override
  final Duration transitionDuration;
 
  @override
  final bool opaque;
 
  @override
  final bool barrierDismissible;
 
  @override
  final Color barrierColor;
 
  @override
  final String barrierLabel;
 
  @override
  final bool maintainState;
 
  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) => pageBuilder(context);
 
  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return FadeTransition(
      opacity: animation,
      child: pageBuilder(context),
    );
  }
}

第一段代码showDialog中的builder可以通过
自定义组件来抽出来,订制各种风格

移除loading的方法

 Navigator.maybePop(context);
点击查看更多内容
iOS
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消