Flutter：如何通过渐变动画改变容器的颜色

Question

我想逐渐改变我的应用颜色。 以下是完整的代码：

 body: DefaultTabController(
    length: _tabs.length, // This is the number of tabs.
    child: NestedScrollView(
      controller: scrollController,
      headerSliverBuilder: (context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverSafeArea(
              top: false,
              sliver: SliverAppBar(
                pinned: true,
                titleSpacing: 0.0,
                elevation: 0.0,
                flexibleSpace: Container(
                  color: innerBoxIsScrolled ? ColorTheme().white : ColorTheme().homeSkyblue,
                ),

我想修改下面的代码：

flexibleSpace: Container(
                  color: innerBoxIsScrolled ? ColorTheme().white : ColorTheme().homeSkyblue,
                ),

我希望我的应用栏可以从homeSkyblue慢慢变成白色。但现在它立即改变颜色。 所以我尝试使用offset或animatedController，但它们都没有起作用......

有人有好的解决方案或小部件吗？

- Noah_J.C_Lee

Answer 1

你可以使用 AnimatedContainer，它类似于Container，但你应该使用 duration。你可以查看这个文档：https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html

那么你的代码将变成这样：

flexibleSpace: AnimatedContainer(
              duration: Duration(seconds: 2),
              color: innerBoxIsScrolled ? ColorTheme().white : ColorTheme().homeSkyblue,
            ),

- Raphaël A