先给大家展示下效果图,感觉不错请参考实例代码。
实现思路
在flutter中,如果想实现上面的页面切换效果,必然会想到pageView。pageView的controller可以监听到pageView的滚动事件,也可以获取pageView滚动的位置,所以我们在滚动事件中根据位置去改变对应的图标颜色就可以实现了。
改变图标颜色
图标是从微信中提取出来的,都是webp格式的图片。要改变图片颜色可以使用ImageIcon这个组件。
ImageIcon会把一张图片变成单色图片,所以只要图片没有多色的要求,就可以用这个组件。
既然能改变颜色了,我们也需要知道pageView滚动的时候究竟要改什么颜色。