flutter: how can I change Container Colors by giving gradation animation

Question

So i would like to change my AppColor slowly. here is the whole code

 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,
                ),

and I would like to change this codes below

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

Well I want my Appbars to change colors, slowly from homeSkyblue to white . but now it works right away. So I've tried using offset or animatedController but they all didn't worked...

does anyone has some good solutions or widgets??

Answer 1

You can use AnimatedContainer, it's like Container but you should use duration. You can look this docs : https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html

So your code will become this :

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