Flutter Animation<Color>：类“Color”没有实例方法“-”

Question

我使用 Tween[Color] 、 NotificationListener[ScrollNotification] 和 Appbar 制作了简单的动画来改变 Appbar 的颜色。我想在这种情况下滚动屏幕时更改颜色 Appbar 和 Action Icon：

• 如果用户滚动 == minScrollExtent => 将颜色更改为透明
• 否则将颜色更改为原色。

逻辑

    if (notification.metrics.pixels == notification.metrics.minScrollExtent) {
      Future.delayed(Duration(seconds: 0), () => controllerAppbar.reverse());
    } else {
      Future.delayed(Duration(seconds: 0), () => controllerAppbar.forward());
    }

当我滚动屏幕并达到这两个条件时，我得到了这个错误，但我得到了我想要的结果。

错误

════════ Exception caught by widgets library ═══════════════════════════════════
Class 'Color' has no instance method '-'.
Receiver: Instance of 'Color'
Tried calling: -(Instance of 'Color')
The relevant error-causing widget was
    AnimatedBuilder 

我该如何解决？

AppBarAnimation 小部件

class AppBarAnimationColor extends StatefulWidget {

  final Duration duration;
  final AnimationController appBarAnimationController;
  AppBarAnimationColor({
   
    @required this.appBarAnimationController,
    this.duration = const Duration(seconds: 1),
  });
  @override
  AppBarAnimationColorState createState() => AppBarAnimationColorState();
}

class AppBarAnimationColorState extends State<AppBarAnimationColor>
    with SingleTickerProviderStateMixin {
  Animation<Color> appbarColor, iconColor;

  @override
  void initState() {
    super.initState();
    appbarColor = Tween<Color>(begin: Colors.transparent, end: colorPallete.primaryColor)
        .animate(widget.appBarAnimationController);
    iconColor = Tween<Color>(begin: colorPallete.primaryColor, end: colorPallete.white)
        .animate(widget.appBarAnimationController);
  }

  @override
  void dispose() {
    widget.appBarAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: appbarColor,
      builder: (_, __) => AppBar(
        actions: [
          IconButton(
            icon: Icon(FontAwesomeIcons.bars),
            onPressed: () => '',
            color: iconColor.value,
          )
        ],
        elevation: 0,
        backgroundColor: appbarColor.value,
      ),
    );
  }
}

欢迎画面

class _WelcomeScreenState extends State<WelcomeScreen>
    with TickerProviderStateMixin {
  AnimationController  _appbarAnimationController;
  @override
  void initState() {
    super.initState();
    _appbarAnimationController =
        AnimationController(vsync: this, duration: kThemeAnimationDuration);
  }

  
  @override
  void dispose() {
    _appbarAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: (notification) => commonF.handleScrollNotification(
        notification,
        controllerAppbar: _appbarAnimationController,
      ),
      child: SafeArea(
        child: Scaffold(
          extendBodyBehindAppBar: true,
          body: Stack(
            fit: StackFit.expand,
            children: [
              SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    SizedBox(height: 1000),
                  ],
                ),
              ),
             Positioned(
                child: AppBarAnimationColor(
                  appBarAnimationController: _appbarAnimationController,
                ),
                top: 0,
                left: 0,
                right: 0,
              ),
            ],
          )
        ),
      ),
    );
  }
}

逻辑

bool handleScrollNotification(
    ScrollNotification notification, {
    AnimationController controllerAppbar,
  }) {
    
    if (notification.metrics.pixels == notification.metrics.minScrollExtent) {
      Future.delayed(Duration(seconds: 0), () => controllerAppbar.reverse());
    } else {
      Future.delayed(Duration(seconds: 0), () => controllerAppbar.forward());
    }
    return false;
  }

Answer 1

您正在使用 Tween，其中使用 ColorTween。 Tween 用于值变化，如 int、float。

appbarColor = ColorTween(begin: Colors.transparent, end: colorPallete.primaryColor)
        .animate(widget.appBarAnimationController);
    iconColor = ColorTween(begin: colorPallete.primaryColor, end: colorPallete.white)
        .animate(widget.appBarAnimationController);