前言
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。
IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯补胚！熱門的框架千篇一律壹哺，好用輪子萬里挑一倾剿！Flutter作為這兩年開始崛起的跨平臺開發(fā)框架鸳吸，其第三方生態(tài)相比其他成熟框架還略有不足熏挎，但輪子的數(shù)量也已經(jīng)很多了。本系列文章挑選日常app開發(fā)常用的輪子分享出來晌砾，給大家提高搬磚效率坎拐，同時也希望flutter的生態(tài)越來越完善，輪子越來越多养匈。
本系列文章準備了超過50個輪子推薦哼勇，工作原因，盡量每1-2天出一篇文章呕乎。
tip:本系列文章合適已有部分flutter基礎(chǔ)的開發(fā)者积担，入門請戳：flutter官網(wǎng)
正文
輪子
- 輪子名稱：liquid_progress_indicator
- 輪子概述：flutter液體效果的頁面切換組件.
- 輪子作者：jordandavies1990@live.co.uk
- 推薦指數(shù)：★★★★
- 常用指數(shù)：★★★
-
效果預(yù)覽：
效果圖
安裝
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,//邊框?qū)挾? 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,//邊框?qū)挾? 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輪子主頁
