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 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: [
        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: [
       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 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(),
    ),
   );
  }