ColorTween 在 TweenAnimationBuilder 中不工作

Question

我已经尝试了 flutter weekly widget https://www.youtube.com/watch?v=l9uHB8VXZOg 中引用的代码。但显然我遇到了问题。


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

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

我试过使用 Tween<Color> 但这是我遇到的错误。


══╡ 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

Answer 1

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

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

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

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

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

我已经稍微更改了您的代码，以便能够运行在本地使用，但您只需复制注释附近的更改即可。

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

ColorTween 在 TweenAnimationBuilder 中不工作

ColorTween not working in TweenAnimationBuilder

flutter

flutter-animation