flutter好用的輪子推薦七-flutter圓形或線型進度條

前言

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

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

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

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

正文

輪子

• 輪子名稱：percent_indicator
• 輪子概述：flutter一個圓形和線形的進度條.
• 輪子做者：diego.velasquez.lopez@gmail.com
• 推薦指數：★★★★
• 經常使用指數：★★★
• 效果預覽：

功能概述

• 圓形百分比進度
• 線形百分比進度
• 切換動畫
• 自定義動畫的持續時間
• 基於百分比值的進度
• 進度和背景色
• 自定義大小
• 左，右或居中子項用於線性百分比指示器
• 圓形百分比指示器的頂部，底部或中心widget
• 使用漸變色

安裝

dependencies:
 percent_indicator: ^2.1.1+1
複製代碼

import '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內容+背景色：
```dart
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",style:new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),),
    circularStrokeCap: CircularStrokeCap.butt,
    backgroundColor: Colors.yellow,
    progressColor: Colors.red,
),
複製代碼

底部文案+動畫+圓角截斷：

new CircularPercentIndicator(
    radius: 120.0,
    lineWidth: 13.0,
    animation: true,
    percent: 0.7,
    center: new Text(
    "70.0%",
    style:
        new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
    ),
    footer: new Text(
    "Sales this week",
    style:
        new TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),
    ),
    circularStrokeCap: CircularStrokeCap.round,
    progressColor: Colors.purple,
)
複製代碼

線型進度

基礎使用：

new LinearPercentIndicator(
    width: 300,
    lineHeight: 14.0,
    percent: 0.5,
    backgroundColor: Colors.grey,
    progressColor: Colors.blue,
),
複製代碼

線型進度+進度數字：

new LinearPercentIndicator(
    width: 300,
    lineHeight: 14.0,
    percent: 0.5,
    center: Text(
    "50.0%",
    style: new TextStyle(fontSize: 12.0),
    ),
    trailing: Icon(Icons.mood),
    linearStrokeCap: LinearStrokeCap.roundAll,
    backgroundColor: Colors.grey,
    progressColor: Colors.blue,
)
複製代碼

線型進度+進度數字+左右內容+動畫+矩形邊框：

new LinearPercentIndicator(
    width: 200,
    animation: true,
    animationDuration: 1000,
    lineHeight: 20.0,
    leading: new Text("左側內容"),
    trailing: new Text("右側內容"),
    percent: percent,
    center: Text((percent*100).toString()+'%'),
    linearStrokeCap: LinearStrokeCap.butt,
    progressColor: Colors.red,
)
複製代碼

更多用法可自行參考輪子文檔中的參數定製。

結尾

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