如何實(shí)現(xiàn)flutter仿微信底部圖標(biāo)漸變功能

pageController.addListener(() {
   int currentPage = pageController.page.toInt();
   //當(dāng)前頁面的page是double類型的, 把它減去當(dāng)前頁面的int類型就可以得出當(dāng)前頁面到下一個(gè)頁面的偏移量了
   double t = pageController.page - currentPage;
   //根據(jù)上一次的頁面位置獲得方向
   if (lastPage <= pageController.page) {
    //向右滑動(dòng)時(shí)currentPage是當(dāng)前頁
    //從當(dāng)前頁過渡到下一頁
    streamController.sink.add(StreamModel(
      timeline: t, index: currentPage, gotoIndex: currentPage + 1));
   } else {
    //向左滑動(dòng)時(shí)currentPage是上一頁
    //從當(dāng)前頁過渡到上一頁
    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 &#63; activeColor : color;
  _activeColor = isActive &#63; 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
         &#63; data.timeline
         : 1.0 - data.timeline;
       print("this${data.index}:${t}");
      }
      //結(jié)束的index
      if (data.gotoIndex == index) {
       t = data.index > data.gotoIndex
         &#63; 1.0 - data.timeline //開始的index大于結(jié)束的index方向向左
         : data.timeline; //小于方向向右
       //過渡到的圖標(biāo)顏色的插值超過0.6時(shí), 個(gè)人感覺當(dāng)前顏色和結(jié)束的哪個(gè)顏色相差太多,
       //所以超過0.6時(shí)恢復(fù)默認(rèn)顏色
       t = t >= 0.6 &#63; 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();
加載圖標(biāo)
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(),
    ),
   );
  }