前言

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+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