ColorTween not working in TweenAnimationBuilder


I have tried the code referred in the flutter weekly widget But Apparently I’m having issues with it.

              tween: ColorTween(begin: Colors.white, end: Colors.grey), // Having errors here
              duration: Duration(milliseconds: 500),
              builder: (_, Color color, __) {
                return Container(
                  margin: EdgeInsets.symmetric(horizontal: 15),
                  padding: EdgeInsets.all(25),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      colorFilter: shouldChange
                          ? ColorFilter.mode(color, BlendMode.modulate)
                          : null,
                      image: AssetImage('assets/someasset.png'),
                  child: SomeWidgetHere...

It says that The argument type 'ColorTween' can't be assigned to the parameter type 'Tween<Color>'.dart(argument_type_not_assignable)

I have tried using the Tween<Color> but this is the error I face.

The following assertion was thrown building
TweenAnimationBuilder<Color>(duration: 500ms, dirty,
dependencies: [_EffectiveTickerMode], state:
Cannot lerp between "Color(0xffffffff)" and "MaterialColor(primary
value: Color(0xff9e9e9e))".
The type Color might not fully implement `+`, `-`, and/or `*`. See
"Types with special
considerations" at for
more information.
To lerp colors, consider ColorTween instead.

The relevant error-causing widget was:

When the exception was thrown, this was the stack:
#0      Tween.lerp.<anonymous closure>
#1      Tween.lerp


That tutorial is from the old days, when null-safety was not a standard 🙂

At the moment the source code for ColorTween states that both colors (begin and end) might be null and will be counted as transparent.

So the ColorTween has colors that might be null (that’s Color? type).

To be able to use it with TweenAnimationBuilder – we have to tell this builder that the type used for the animation might be null.
We do this by defining TweenAnimationBuilder<Color?> instead of TweenAnimationBuilder as in your code above.

Also, we have to be sure that the value (second parameter) of the builder() function is null-safe too.

I’ve changed your code a bit to be able to run it locally, but you can just copy the changes near the comments.

TweenAnimationBuilder<Color?>( // <-- Color might be null
            tween: ColorTween(begin: Colors.yellow, end:,
            duration: Duration(milliseconds: 2000),
            builder: (_, Color? color, __) { // <-- Color might be null
              return Container(
                width: 200.0,
                height: 200.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    colorFilter: ColorFilter.mode(
                      color ?? Colors.transparent, // <-- If color is null - pass transparent
                    image: NetworkImage(
                child: Container(),

Answered By – Thepeanut

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.