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

前言

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

結尾

• 輪子倉庫地址：pub.flutter-io.cn/packages/li…
• 系列演示demo源碼：github.com/826327700/f…