前言
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。
IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。
本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇文章。
tip:本系列文章合适已有部分flutter基础的开发者，入门请戳：flutter官网
正文
轮子
轮子名称：liquid_swipe轮子概述：flutter液体效果的页面切换组件.轮子作者：sahdeepsingh98@gmail.com推荐指数：★★★★常用指数：★★★★效果预览：安装
dependencies: liquid_swipe: ^1.3.0
import 'package:liquid_swipe/Constants/Helpers.dart'; import 'package:liquid_swipe/liquid_swipe.dart';
使用方法
基础使用：
LiquidSwipe( pages: [],//页面列表 fullTransitionValue: 200,//滑动阀值 enableSlideIcon: true,//显示右侧图标 enableLoop: true,//循环切换 positionSlideIcon: 0.5,//右侧图标的位置 waveType: WaveType.liquidReveal,//切换效果 onPageChangeCallback: (page) => pageChangeCallback(page),//页面切换回调 currentUpdateTypeCallback: (updateType) => updateTypeCallback(updateType),//当前页面更新回调 ）
完整示例：
class LiquidSwipeDemo extends StatefulWidget { LiquidSwipeDemo({Key key}) : super(key: key); @override _demoState createState() => _demoState(); } class _demoState extends State { WaveType currentAnimate=WaveType.liquidReveal; void changeAnimate(){ setState(() { if(currentAnimate==WaveType.liquidReveal){ currentAnimate=WaveType.circularReveal; }else{ currentAnimate=WaveType.liquidReveal; } }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("liquid_swipe"), actions: [ GoWeb(pluginName: 'liquid_swipe') ], ), body: LiquidSwipe( pages: [ Container( color: Colors.blue, child: Center( child: FlatButton( child: Text("切换效果"), onPressed: (){ changeAnimate(); }, ), ), ), Container( color: Colors.pink, ), Container( color: Colors.teal, child: ConstrainedBox( child:Image.network('http://hbimg.b0.upaiyun.com/c9d0ae1ea6dafe5b7af0e2387e161778d7a146b83f571-ByOb1k_fw658', fit: BoxFit.cover,), constraints: new BoxConstraints.expand(), ) ), ], fullTransitionValue: 200, enableSlideIcon: true, enableLoop: true, positionSlideIcon: 0.5, waveType: currentAnimate, onPageChangeCallback: (page) => pageChangeCallback(page), currentUpdateTypeCallback: (updateType) => updateTypeCallback(updateType), ), ); } pageChangeCallback(int page) { print(page); } updateTypeCallback(UpdateType updateType) { print(updateType); } }
更多用法请参考pub轮子主页