flutter仿微信底部图标渐变功能的实现代码

pageController.addListener(() {
   int currentPage = pageController.page.toInt();
   //当前页面的page是double类型的, 把它减去当前页面的int类型就可以得出当前页面到下一个页面的偏移量了
   double t = pageController.page - currentPage;
   //根据上一次的页面位置获得方向
   if (lastPage <= pageController.page) {
    //向右滑动时currentPage是当前页
    //从当前页过渡到下一页
    streamController.sink.add(StreamModel(
      timeline: t, index: currentPage, gotoIndex: currentPage + 1));
   } else {
    //向左滑动时currentPage是上一页
    //从当前页过渡到上一页
    streamController.sink.add(StreamModel(
      timeline: t, index: currentPage + 1, gotoIndex: currentPage));
   }
   lastPage = pageController.page;
  });

class StreamModel {
 const StreamModel({this.timeline, this.index, this.gotoIndex});
 
 final double timeline;
 final int index;
 final int gotoIndex;
}

class BottomNavIcon extends StatelessWidget {
  final StreamController<StreamModel> streamController;
  final int index;
  final String img;
   final String title;
   final double fontSize;
   Color _color;
   Color _activeColor;
   final bool isActive;
  BottomNavIcon(this.title, this.img, this.index,
   {@required this.streamController,
   this.isActive = false,
   this.fontSize = 18.0,
   Color color = Colors.grey,
   Color activeColor = Colors.blue}) {
  _color = isActive ? activeColor : color;
  _activeColor = isActive ? color : activeColor;
  }
  @override
  Widget build(BuildContext context) {
  return StreamBuilder(
    stream: streamController.stream,
    builder: (BuildContext context, AsyncSnapshot snapshot) {
     final StreamModel data = snapshot.data;
     double t = 0.0;
     if (data != null) {
      //开始的index
      if (data.index == index) {
       t = data.index > data.gotoIndex
         ? data.timeline
         : 1.0 - data.timeline;
       print("this${data.index}:${t}");
      }
      //结束的index
      if (data.gotoIndex == index) {
       t = data.index > data.gotoIndex
         ? 1.0 - data.timeline //开始的index大于结束的index方向向左
         : data.timeline; //小于方向向右
       //过渡到的图标颜色的插值超过0.6时, 个人感觉当前颜色和结束的哪个颜色相差太多,
       //所以超过0.6时恢复默认颜色
       t = t >= 0.6 ? 1 : t;
       print("goto${data.gotoIndex}:${t}");
      }
     }
     if (t > 0.0 && t < 1.0) {
      //color.lerp 获取两种颜色之间的线性插值
      return Column(
       children: <Widget>[
        ImageIcon(AssetImage(this.img),
          color: Color.lerp(_color, _activeColor, t)),
        Text(title,
          style: TextStyle(
            fontSize: fontSize,
            color: Color.lerp(_color, _activeColor, t))),
       ],
      );
     }
     return Column(
      children: <Widget>[
       ImageIcon(AssetImage(this.img),
         color:
           Color.fromRGBO(_color.red, _color.green, _color.blue, 1)),
       Text(title,
         style: TextStyle(
           fontSize: fontSize,
          color: Color.fromRGBO(
             _color.red, _color.green, _color.blue, 1))),
      ],
     );
    });
   }
  }

final StreamController<StreamModel> streamController =
  StreamController.broadcast();
加载图标
for (int i = 0; i < pages.length; i++) {
   TabBarModel model = pages[i];
   bars.add(
    BottomNavigationBarItem(
     icon: BottomNavIcon(
      model.title,
      'assets/images/tabbar_' + model.icon + '_c.webp',
      i,
      streamController: streamController,
     ),
     activeIcon: BottomNavIcon(
      model.title,
      'assets/images/tabbar_' + model.icon + '_s.webp',
      i,
      streamController: streamController,
      isActive: true,
     ),
     title: Center(),
    ),
   );
  }