Flutter FadeTransition and backdrop filter

Question

FadeTransition animation is not working for backdropfilter. The opacity goes from 0 to 1 suddenly, without the smooth transition that the animation should give. As you can see from the code below, I have a background image and then a backdropfilter on top to blur the background at app startup. (I then show other widgets, but the animation is working fine for them).

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),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

basically what I get from this code is the background image clear and nice, then after 2 seconds suddenly blurred, without any transition. What should I do to make fadeTransition to work with Backdropfilter?

Answer 1

The preferred way to fade in a blur is to use a 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),
              ),
            ),
            );
          },
        ),