【笔记】Flutter实现圆环进度条

发表于 更新于 阅读次数：

前言

Flutter实现圆环进度条

下载依赖

1
flutter pub add percent_indicator

引入依赖

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

渲染圆环进度条

radius：圆环尺寸
lineWidth：圆环线条粗细
percent：圆环进度
center：圆环中间显示的内容，可以是任意组件
progressColor：圆环线条颜色

1
2
3
4
5
6
7
CircularPercentIndicator(
    radius: 20,
    lineWidth: 3.0,
    percent: 1.0,
    center: Text("文本内容"),
    progressColor: Colors.red,
)

完成

参考文献

稀土掘金——小小包子