前言
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<LiquidSwipeDemo> {
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: <Widget>[
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轮子主页
