TabBar,TabView切换动态更改颜色

做过安卓原生的应该接触过监听ViewPage的滑动去动态更改某个位置的颜色颜色，这几天刚入门Flutter中的动画方面，想写一个这个一样的可被愁死了，几乎所有的动画教程中animate所跟的都是一个AnimationController或者一个parent为AnimationController的CurvedAnimation，最终的动画始终与时间相关，很难联系到UI的交互，然后作者去看了官方源码的一系列像RefreshIndicator和TabPageSelectorIndicator的构造函数加上朋友对动画的一些写法才写出来的，

首先还是看效果

1231312.gif

至于点击Tab后TabView没有动态的更改颜色是因为TabView被写死了与TabBar联动的时候TabBar直接被点击切换TabView没有动态滑动的效果

最后贴代码

void main() {
  runApp(MYS());
}

class MYS extends StatefulWidget {
  @override
  _MYSState createState() => _MYSState();
}

final List<Color> _colors = [
  Colors.blue,
  Colors.green,
  Colors.pink,
  Colors.yellow,
  Colors.red,
  Colors.purple,
  Colors.orange,
];

class _MYSState extends State<MYS> with SingleTickerProviderStateMixin {
  TabController _mysTabController;
  Color _color;
  @override
  void initState() {
    _color ??= _colors[0]; //设置一个颜色的初始值
    _mysTabController = TabController(vsync: this, length: 6);
    super.initState();
    _mysTabController.animation.addListener(() {
      setState(() {
        if (_mysTabController.offset > 0) {
          //当Tab向右滑动时
          final ColorTween myscolor = ColorTween(
            begin: _colors[_mysTabController.index],
            end: _colors[_mysTabController.index + 1],
          );
          _color = myscolor.lerp(_mysTabController.offset);
        }
        if (_mysTabController.offset < 0) {
          //当Tab向左滑动时
          final ColorTween myscolor = ColorTween(
            begin: _colors[_mysTabController.index],
            end: _colors[_mysTabController.index - 1],
          );
          _color = myscolor.lerp(-_mysTabController.offset);
        }
        print(_mysTabController.offset);
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: _color,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: _color,
          title: Text("MYSTabColur"),
          bottom: TabBar(
            controller: _mysTabController,
            tabs: <Widget>[
              Tab(
                text: "一",
              ),
              Tab(
                text: "二",
              ),
              Tab(
                text: "三",
              ),
              Tab(
                text: "四",
              ),
              Tab(
                text: "五",
              ),
              Tab(
                text: "六",
              ),
            ],
          ),
        ),
        body: TabBarView(
          controller: _mysTabController,
          children: <Widget>[
            Container(
              color: _color,
              child: Center(
                child: Text("MYScolor"),
              ),
            ),
            Container(
              color: _color,
              child: Center(
                child: Text("MYScolor"),
              ),
            ),
            Container(
              color: _color,
              child: Center(
                child: Text("MYScolor"),
              ),
            ),
            Container(
              color: _color,
              child: Center(
                child: Text("MYScolor"),
              ),
            ),
            Container(
              color: _color,
              child: Center(
                child: Text("MYScolor"),
              ),
            ),
            Container(
              color: _color,
              child: Center(
                child: Text("MYScolor"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码已上传到我的Github