Flutter中的FadeTransition和背景滤镜

Question

FadeTransition动画在backdropfilter上没有起作用。 透明度突然从0变为1，没有动画应该有的平滑过渡效果。 从下面的代码可以看出，我有一个背景图像，然后在启动应用程序时在其上方放置了backdropfilter以模糊背景。 (然后我展示其他小部件，但是它们的动画效果很好)。

import 'dart:ui';

import 'package:flutter/material.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _backgroundOpacity;

  bool _visible = true;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..forward();

    // background opacity animation
    _backgroundOpacity = Tween<double>(
      begin: 0,
      end: 1,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(0, 1, curve: Curves.linear),
      ),
    );
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green[800],
      ),
      body: Stack(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Image(
              image: AssetImage('assets/field.jpg'),
              fit: BoxFit.cover,
            ),
          ),

          FadeTransition(
            opacity: _backgroundOpacity,
            child: Container(
              child: BackdropFilter(
                filter: new ImageFilter.blur(sigmaX: 6.0, sigmaY: 6.0),
                child: new Container(
                  decoration: new BoxDecoration(
                    color: Colors.grey.shade200.withOpacity(0.5),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

从这段代码中，我所理解的是背景图片一开始很清晰，然后2秒后突然模糊了，没有任何过渡效果。那么我该如何让fadeTransition与Backdropfilter一起工作呢？

- Val

Answer 1

实现模糊渐变的首选方法是使用TweenAnimationBuilder：

TweenAnimationBuilder<double>(
          duration: Duration(milliseconds: 500),
          tween: Tween<double>(begin: 0, end: 6),
          builder: (context, value, _) {
            return BackdropFilter(
              key: GlobalObjectKey('background'),
              filter: ImageFilter.blur(sigmaY: value, sigmaX: value),
              child: Container(
              decoration: new BoxDecoration(
                color: Colors.grey.shade200.withOpacity(0.5),
              ),
            ),
            );
          },
        ),

- Banjoe