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

使用方式

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);