flutter好用的輪子推薦十九-flutter水波效果的進度器

前言

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

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

本系列文章準備了超過50個輪子推薦，工做緣由，儘可能每1-2天出一篇文章。

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

正文

輪子

• 輪子名稱：liquid_progress_indicator
• 輪子概述：flutter液體效果的頁面切換組件.
• 輪子做者：jordandavies1990@live.co.uk
• 推薦指數：★★★★
• 經常使用指數：★★★
• 效果預覽：

安裝

dependencies:
 liquid_progress_indicator: ^0.3.2
複製代碼

import 'package:liquid_progress_indicator/liquid_progress_indicator.dart';
複製代碼

使用方法

條形進度器

LiquidLinearProgressIndicator(
    value: 0.8, //當前進度 0-1
    valueColor: AlwaysStoppedAnimation(Colors.greenAccent), // 進度值的顏色.
    backgroundColor: Colors.white, // 背景顏色.
    borderColor: Colors.green,//邊框顏色
    borderWidth: 2.0,//邊框寬度
    direction: Axis.horizontal, // 進度方向 (Axis.vertical = 從下到上, Axis.horizontal = 從左到右). 默認：Axis.vertical
    center: Text("正在加載..."), //中間顯示的組件 
)
複製代碼

效果圖：

圓形進度器

LiquidCircularProgressIndicator(
    value: 0.8, //當前進度 0-1
    valueColor: AlwaysStoppedAnimation(Colors.blue[200]), // 進度值的顏色.
    backgroundColor: Colors.white, // 背景顏色.
    borderColor: Colors.blue,//邊框顏色
    borderWidth: 2.0,//邊框寬度
    direction: Axis.vertical, // 進度方向 (Axis.vertical = 從下到上, Axis.horizontal = 從左到右). 默認：Axis.vertical
    center: Text("正在上傳..."), //中間顯示的組件 
)
複製代碼

效果圖：

自定義形狀進度器

LiquidCustomProgressIndicator(
    value: 0.2 ,
    valueColor: AlwaysStoppedAnimation(Colors.pink), 
    backgroundColor: Colors.pink[50], 
    direction: Axis.vertical, 
    shapePath: _buildHeartPath(), // 自定義形狀路徑
),
複製代碼

Path _buildHeartPath() {
    return Path()
    ..moveTo(55, 15)
    ..cubicTo(55, 12, 50, 0, 30, 0)
    ..cubicTo(0, 0, 0, 37.5, 0, 37.5)
    ..cubicTo(0, 55, 20, 77, 55, 95)
    ..cubicTo(90, 77, 110, 55, 110, 37.5)
    ..cubicTo(110, 37.5, 110, 0, 80, 0)
    ..cubicTo(65, 0, 55, 12, 55, 15)
    ..close();
}
複製代碼

效果圖：

更多用法請參考pub輪子主頁

結尾

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