前言
Flutter是谷歌的移動UI架構，可以快速在iOS和Android上建構高品質的原生使用者界面。
IT界著名的尼古拉斯·高爾包曾說：輪子是IT進步的階梯！熱門的架構千篇一律，好用輪子萬裡挑一！Flutter作為這兩年開始崛起的跨平台開發架構，其第三方生态相比其他成熟架構還略有不足，但輪子的數量也已經很多了。本系列文章挑選日常app開發常用的輪子分享出來，給大家提高搬磚效率，同時也希望flutter的生态越來越完善，輪子越來越多。
本系列文章準備了超過50個輪子推薦，工作原因，盡量每1-2天出一篇文章。
tip:本系列文章合适已有部分flutter基礎的開發者，入門請戳：flutter官網
正文
輪子
- 輪子名稱：percent_indicator
- 輪子概述：flutter一個圓形和線形的進度條.
- 輪子作者：[email protected]
- 推薦指數：★★★★
- 常用指數：★★★
- 效果預覽：
功能概述
- 圓形百分比進度
- 線形百分比進度
- 切換動畫
- 自定義動畫的持續時間
- 基于百分比值的進度
- 進度和背景色
- 自定義大小
- 左，右或居中子項用于線性百分比訓示器
- 圓形百分比訓示器的頂部，底部或中心widget
- 使用漸變色
安裝
dependencies: percent_indicator: ^2.1.1+1import 'package:percent_indicator/percent_indicator.dart';
使用
圓形進度
基礎使用
new CircularPercentIndicator( radius: 60.0, //大小 lineWidth: 5.0,//訓示線條大小 percent: 1.0,//目前進度 center: new Text("100%"),//中心widget 可以是文字 或其他widget 如何icon progressColor: Colors.green, //進度條顔色 ....)
頭部标題+icon内容+背景色：
new CircularPercentIndicator( radius: 100.0, lineWidth: 10.0, percent: 0.8, header: new Text("Icon header"), center: new Icon( Icons.person_pin, size: 50.0, color: Colors.blue, ), backgroundColor: Colors.grey, progressColor: Colors.blue,)
頭部标題+動畫：
new CircularPercentIndicator( radius: 130.0, animation: true, animationDuration: 1200, lineWidth: 15.0, percent: 0.4, center: new Text("40 hours