flutter好用的輪子推薦十八-flutter液體效果的頁面切換組件

前言

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。

IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一律，好用輪子萬里挑一！Flutter作為這兩年開始崛起的跨平臺開發框架，其第三方生態相比其他成熟框架還略有不足，但輪子的數量也已經很多了。本系列文章挑選日常app開發常用的輪子分享出來，給大家提高搬磚效率，同時也希望flutter的生態越來越完善，輪子越來越多。

本系列文章準備了超過50個輪子推薦，工作原因，儘量每1-2天出一篇文章。

tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網

正文

輪子

• 輪子名稱：liquid_swipe
• 輪子概述：flutter液體效果的頁面切換組件.
• 輪子作者：[email protected]
• 推薦指數：★★★★
• 常用指數：★★★★
• 效果預覽：
  

安裝

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輪子主頁