Flutter-PercentIndicator

PercentIndicator

这是一个百分比指示器的组件，俗称进度条。是第三方组件，用以弥补官方的 CircularProgressIndicator 的不足。我曾想用官方的进度条组件包裹一个圆框，用以展示头像上传进度，然而官方的组件并不支持在圆环中间插入子组件，所以自己做的话，或许要用层叠布局，颇感麻烦。

但是今天偶然遇见这个第三方组件就解决了这个问题。

依赖引入

percent_indicator: ^4.0.1

使用

class ProgressBarPageContent extends StatefulWidget {
  const ProgressBarPageContent({Key? key}) : super(key: key);
  @override
  State<ProgressBarPageContent> createState() => _ProgressBarPageContentState();
}

class _ProgressBarPageContentState extends State<ProgressBarPageContent> {
  double progress=0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          CircularPercentIndicator(
            //开启过渡动画
            animation: true,
            //动画起点从上一次动画终点开始。默认从0开始。
            animateFromLastPercent: true,
            //圆环底色
            backgroundColor: Colors.red[200]!,
            //外圆半径
            radius: 150,
            //圆环宽度
            lineWidth: 10,
            //圆环线帽设置，也就是进度条的尾部，多出一部分用作线帽，线帽的形状
            circularStrokeCap: CircularStrokeCap.round,
            //这里圆环中间可放置任意元素。
            center: const CircleAvatar(
              backgroundImage: AssetImage("images/head/nilu.png"),
              radius: 140,
            ),
            //percent为进度
            percent: progress
          ),
          const SizedBox(height: 10,),
          ElevatedButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.redAccent)
            ),
            onPressed: (){
              setState(() {
                if(progress==1) {
                  progress=0;
                } else {
                  progress=1;
                }
              });
            },
            child: const Text("Show Progress")
          )
        ],
      ),
    );
  }
}

效果展示