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…