当前位置：网站首页>flutter圆形或线型进度条

flutter圆形或线型进度条

2020-12-16 08:47:22 【osc_0atwpkmx】

前言

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说：轮子是IT进步的阶梯！热门的框架千篇一律，好用轮子万里挑一！Flutter作为这两年开始崛起的跨平台开发框架，其第三方生态相比其他成熟框架还略有不足，但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来，给大家提高搬砖效率，同时也希望flutter的生态越来越完善，轮子越来越多。

本系列文章准备了超过50个轮子推荐，工作原因，尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者，入门请戳：flutter官网

正文

轮子

  • 轮子名称：percent_indicator
  • 轮子概述：flutter一个圆形和线形的进度条.
  • 轮子作者：diego.velasquez.lopez@gmail.com
  • 推荐指数：****
  • 常用指数：***
  • 效果预览：效果图

    效果图

功能概述

  • 圆形百分比进度
  • 线形百分比进度
  • 切换动画
  • 自定义动画的持续时间
  • 基于百分比值的进度
  • 进度和背景色
  • 自定义大小
  • 左，右或居中子项用于线性百分比指示器
  • 圆形百分比指示器的顶部，底部或中心widget
  • 使用渐变色

安装

yaml

1
2
 
dependencies:
  percent_indicator: ^2.1.1+1

dart

1
 
import 'package:percent_indicator/percent_indicator.dart';

使用

圆形进度

基础使用

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
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,
)

头部标题+动画：

dart

1
2
3
4
5
6
7
8
9
10
11
 
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,
),

底部文案+动画+圆角截断：

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
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,
)

线型进度

基础使用：

dart

1
2
3
4
5
6
7
 
new LinearPercentIndicator(
    width: 300,
    lineHeight: 14.0,
    percent: 0.5,
    backgroundColor: Colors.grey,
    progressColor: Colors.blue,
),

线型进度+进度数字：

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
 
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,
)

线型进度+进度数字+左右内容+动画+矩形边框：

dart

1
2
3
4
5
6
7
8
9
10
11
12
 
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,
)

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

结尾

版权声明
本文为[osc_0atwpkmx]所创，转载请带上原文链接，感谢
https://my.oschina.net/u/4417586/blog/4809244

边栏推荐

猜你喜欢

随机推荐