阅读 999

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,
)
复制代码

更多用法可自行参考轮子文档中的参数定制。

结尾