Flutter color animation produces unwanted flashing - flutter

Question

I want to animate from this white color with slight opacity to a black color with very high opacity.
Colors are
Color(0xB1FFFFFF) - White
Color(0x0B000000) - Black
This will produce an animation with a "flash". However, this should not happen.
What am I doing wrong? When doing the same animation with css, it does not "flash".
This is how it looks when using css and how I would expect it:
The jump to white is not important, it's just the animation restarting.
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(const AnimatedContainerApp());
class AnimatedContainerApp extends StatefulWidget {
const AnimatedContainerApp({Key? key}) : super(key: key);
#override
_AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}
class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
double _width = 50;
double _height = 50;
Color _color = Color(0xB1FFFFFF);
BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('AnimatedContainer Demo'),
),
body: Center(
child: AnimatedContainer(
width: _width,
height: _height,
decoration: BoxDecoration(
color: _color,
borderRadius: _borderRadius,
),
duration: const Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_color = Color(0x0B000000);
});
},
child: const Icon(Icons.play_arrow),
),
),
);
}
}

Answer 1

I found an alternative of this using Stack widget.
class _AnimatedContainerAppState extends State<AnimatedContainerApp>{
double _width = 50;
double _height = 50;
Color colorA = Color(0xB1FFFFFF);
Color colorB = Color(0x9F000000); //change your color here
double opacity = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.pink,
appBar: AppBar(
title: const Text('AnimatedContainer Demo'),
),
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: SizedBox(
key: const ValueKey("C"),
width: _width,
height: _height,
child: Stack(
fit: StackFit.expand,
children: [
//fixed color
AnimatedOpacity(
opacity: (1 - opacity).abs(),
duration: const Duration(seconds: 1),
child: ColoredBox(color: colorA),
),
AnimatedOpacity(
opacity: opacity,
duration: const Duration(seconds: 1),
child: ColoredBox(color: colorB),
),
],
),
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
opacity = opacity == 0 ? 1 : 0;
});
},
child: const Icon(Icons.play_arrow),
),
),
);
}
}
You can also try with others animated widget like AnimatedCrossFade , FadeTransition etc.

Answer 2

I now understand why this "issue" exists.
Since both colors vary a lot both in opacity and color, a basic interpolation by time over the rgba values produces this behavior.
Whilst the alpha is being interpolated, the color is so too, and this creates a temporary darker color in between.
Dart interpolates colors by mapping the difference in colors to the time in the rgba spectrum.
a + (b - a) * t
This article describes very good what happens and other possible solutions for interpolating colors.
Also using HSL instead of rgba might also solve the issue. However, converting the color to HSL every time is not near as performant as flat rgba interpolation. Dart is all about performance, so this might be why they went for this very basic approach.
My personal solution to the problem was a very basic one though. I asked the designer to bring the colors closer together :)