ColorTween not working in TweenAnimationBuilder

Issue

I have tried the code referred in the flutter weekly widget https://www.youtube.com/watch?v=l9uHB8VXZOg. But Apparently I’m having issues with it.

TweenAnimationBuilder<Color>(
              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.

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY
╞═══════════════════════════════════════════════════════════
The following assertion was thrown building
TweenAnimationBuilder<Color>(duration: 500ms, dirty,
dependencies: [_EffectiveTickerMode], state:
_TweenAnimationBuilderState<Color>#5bacf(ticker
active)):
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
https://api.flutter.dev/flutter/animation/Tween-class.html for
more information.
To lerp colors, consider ColorTween instead.

The relevant error-causing widget was:
  TweenAnimationBuilder<Color>
  SOME PATH HERE:29:20

When the exception was thrown, this was the stack:
#0      Tween.lerp.<anonymous closure>
(package:flutter/src/animation/tween.dart:268:9)
#1      Tween.lerp

Solution

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: Colors.blue),
            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
                      BlendMode.modulate,
                    ),
                    image: NetworkImage(
                        'https://upload.wikimedia.org/wikipedia/commons/7/7e/Dart-logo.png'),
                  ),
                ),
                child: Container(),
              );
            },
          )

Answered By – Thepeanut

Answer Checked By – Terry (FlutterFixes Volunteer)