ColorTween 无法在 TweenAnimationBuilder 中工作

Question

我已经尝试了颤动每周小部件https://www.youtube.com/watch?v=l9uHB8VXZOg中提到的代码。但显然我遇到了问题。

\n

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

\n

它说The argument type \'ColorTween\' can\'t be assigned to the parameter type \'Tween<Color>\'.dart(argument_type_not_assignable)

\n

我尝试过使用，Tween<Color>但这是我面临的错误。

\n

\n\xe2\x95\x90\xe2\x95\x90\xe2\x95\xa1 EXCEPTION CAUGHT BY WIDGETS LIBRARY\n\xe2\x95\x9e\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\nThe following assertion was thrown building\nTweenAnimationBuilder<Color>(duration: 500ms, dirty,\ndependencies: [_EffectiveTickerMode], state:\n_TweenAnimationBuilderState<Color>#5bacf(ticker\nactive)):\nCannot lerp between "Color(0xffffffff)" and "MaterialColor(primary\nvalue: Color(0xff9e9e9e))".\nThe type Color might not fully implement `+`, `-`, and/or `*`. See\n"Types with special\nconsiderations" at\nhttps://api.flutter.dev/flutter/animation/Tween-class.html for\nmore information.\nTo lerp colors, consider ColorTween instead.\n\nThe relevant error-causing widget was:\n  TweenAnimationBuilder<Color>\n  SOME PATH HERE:29:20\n\nWhen the exception was thrown, this was the stack:\n#0      Tween.lerp.<anonymous closure>\n(package:flutter/src/animation/tween.dart:268:9)\n#1      Tween.lerp\n

\n

Answer 1

该教程来自过去，当时空安全还不是标准:)

目前，ColorTween的源代码声明两种颜色（开始和结束）都可能为空，并且将被视为透明。

因此ColorTween 的颜色可能为 null（即Color？类型）。

为了能够将其与TweenAnimationBuilder一起使用- 我们必须告诉此构建器用于动画的类型可能为 null。
我们通过定义TweenAnimationBuilder<Color?>而不是上面代码中的TweenAnimationBuilder来实现此目的。

另外，我们必须确保builder()函数的值（第二个参数）也是空安全的。

我对您的代码进行了一些更改，以便能够在本地运行它，但您只需复制注释附近的更改即可。

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