Flutter FadeTransition and backdrop filter - flutter

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