前言
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。
IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的框架千篇一律，好用輪子萬里挑一！Flutter作為這兩年開始崛起的跨平臺開發框架，其第三方生態相比其他成熟框架還略有不足，但輪子的數量也已經很多了。本系列文章挑選日常app開發常用的輪子分享出來，給大家提高搬磚效率，同時也希望flutter的生態越來越完善，輪子越來越多。
本系列文章準備了超過50個輪子推薦，工作原因，儘量每1-2天出一篇文章。
tip:本系列文章合適已有部分flutter基礎的開發者，入門請戳：flutter官網
正文
輪子
- 輪子名稱：liquid_progress_indicator
- 輪子概述：flutter液體效果的頁面切換組件.
- 輪子作者：[email protected]
- 推薦指數：★★★★
- 常用指數：★★★
- 效果預覽：
安裝
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輪子主頁
分享到:
