Flutter-在页面路由过渡中添加模糊效果

Question

我需要在显示progressIndicator时应用模糊效果。

这是我的应用程序的示例屏幕

Widget build(BuildContext context) {
final spinkitFadingCircle = SpinKitFadingCircle(color: Colors.red);
return WillPopScope(
  onWillPop: _onWillPop,
  child: ModalProgressHUD(
    progressIndicator: spinkitFadingCircle,
    inAsyncCall: _saving,
    child: Scaffold(
      body: ListView(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
          RaisedButton(
              child: Text("Next Page"),
              onPressed: () => Navigator.push(context,
                  MaterialPageRoute(builder: (context) => Screen2()))),
          Container(
            color: Colors.green,
            height: 100,
            width: 100,
          ),
          Container(
            color: Colors.red,
            height: 100,
            width: 100,
          ),
        ],
      ),
    ),
  ),
);

这些是我正在使用的类。在本课程中，我将展示新的指示器，但是我需要使背面图像具有模糊效果，尽管我不知道如何应用该效果

    class _SpinKitFadingCircleState extends State<SpinKitFadingCircle>
    with SingleTickerProviderStateMixin {
  final List<double> delays = [
    .0,
    -1.1,
    -1.0,
    -.9,
    -.8,
    -.7,
    -.6,
    -.5,
    -.4,
    -.3,
    -.2,
    -.1
  ];
  AnimationController _controller;


Widget build(BuildContext context) {
    return Center(
      child: Transform(
              transform: Matrix4.rotationZ(30 * i * 0.0174533),
              child: Align(
                alignment: Alignment.center,
                child: FadeTransition(
                  opacity: DelayTween(begin: 0.0, end: 1.0, delay: delays[i])
                      .animate(_controller),
                  child: SizedBox.fromSize(
                    size: Size.square(widget.size * 0.15),
                    child: _itemBuilder(i),
                  ),
                ),
              ),
            ),
          );
        })),
      ),
    );
  }
}


class DelayTween extends Tween<double> {
  final double delay;
  DelayTween({double begin, double end, this.delay})
      : super(begin: begin, end: end);

  @override
  double lerp(double t) =>
      super.lerp((math.sin((t - delay) * 2 * math.pi) + 1) / 2);

  @override
  double evaluate(Animation<double> animation) => lerp(animation.value);
}

谢谢大家的帮助！