Question

FadeTransition 动画不适用于背景滤镜。不透明度突然从 0 变为 1，没有动画应该提供的平滑过渡。正如您从下面的代码中看到的，我有一个背景图像，然后在顶部有一个背景过滤器，用于在应用程序启动时模糊背景。（然后我展示了其他小部件，但动画对它们来说效果很好）。

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 一起工作？

Flutter FadeTransition 和背景过滤器

0 个答案: