Flutter进度展示插件progress_circle的使用

Flutter进度展示插件progress_circle的使用

该插件提供了一个美观且易于使用的组件，可以渲染一个带有进度弧线的圆。你可以在应用中使用它来向用户展示一些进度或活动。

特性

该组件非常简单且可定制，你可以通过组合不同的状态来获得所需的配置。以下是一些基本的状态：

示例

使用方法

要使用基本状态，只需传递所需的参数：

ProgressCircle(
    completed: 4.0,
    total: 8.0,
),

也可以通过百分比值创建相同的状态：

ProgressCircle(
    completedPercent: 50.0,
),

如果同时设置了两组参数，completedPercent 将被选中，而其他参数将被忽略：

ProgressCircle(
    completed: 2.0, // 忽略
    total: 8.0, // 忽略
    completedPercent: 50.0, // 选择
),

为了方便使用，插件还提供了一些命名构造函数，只请求当前情况所需参数：

ProgressCircle.fromValues(
    total: 4.0,
    completed: 8.0,
),

ProgressCircle.fromPercent(
    completedPercent: 50.0,
),

可以通过 size 字段更改组件的大小：

ProgressCircle(
    completedPercent: 50,
    size: Size.fromRadius(75),
),

还有 style 属性可以进行自定义：

ProgressCircle(
    completedPercent: 50,
    style: ProgressCircleStyle(
        progressArcColor: Colors.orange,
        headIcon: Icons.star,
        tailIcon: Icons.apple,
        centerMessage: '你真棒！',
        centerMessageStyle: TextStyle(
            color: Colors.orange,
            fontSize: 14,
        ),
    ),
),

style 中还有其他属性可以用于自定义，你可以根据需要设置相应的配置。

完整示例代码

import 'package:flutter/material.dart';
import 'package:progress_circle/progress_circle.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  static const _bgColor = Color.fromRGBO(253, 247, 254, 1);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: _bgColor,
        body: SafeArea(
          child: Center(
            child: Wrap(
              spacing: 100.0,
              runSpacing: 50.0,
              children: [
                const ProgressCircle(total: 100, completed: 35), // 按数值
                const ProgressCircle(total: 100, completed: 70), // 按数值
                const ProgressCircle(completedPercent: 85), // 按百分比

                /// fromPercent
                const ProgressCircle.fromPercent(
                  completedPercent: 35,
                  style: ProgressCircleStyle(
                    headIcon: Icons.apple,
                    arcWidth: 20,
                  ),
                ),
                const ProgressCircle.fromPercent(
                  completedPercent: 70,
                  style: ProgressCircleStyle(
                    tailIcon: Icons.star,
                    arcWidth: 30,
                  ),
                ),
                const ProgressCircle.fromPercent(
                  completedPercent: 85,
                  style: ProgressCircleStyle(
                    headIcon: Icons.apple,
                    tailIcon: Icons.star,
                    arcWidth: 50,
                  ),
                ),

                /// fromValues
                const ProgressCircle.fromValues(
                  total: 100,
                  completed: 35,
                  style: ProgressCircleStyle(
                    progressArcColor: Colors.orange,
                    headIcon: Icons.apple,
                  ),
                ),
                const ProgressCircle.fromValues(
                  total: 100,
                  completed: 70,
                  style: ProgressCircleStyle(
                    progressArcColor: Colors.green,
                    tailIcon: Icons.star,
                  ),
                ),

                const ProgressCircle.fromValues(
                  total: 100,
                  completed: 85,
                  style: ProgressCircleStyle(
                    progressArcColor: Colors.purple,
                    headIcon: Icons.apple,
                    tailIcon: Icons.star,
                  ),
                ),

                /// 其他样式
                ProgressCircle.fromValues(
                  total: 100,
                  completed: 35,
                  style: ProgressCircleStyle(
                    progressArcColor: Colors.orange,
                    arcColor: Colors.orange.shade100,
                    headIcon: Icons.apple,
                  ),
                ),
                ProgressCircle.fromValues(
                  total: 100,
                  completed: 70,
                  style: ProgressCircleStyle(
                    progressArcColor: Colors.green,
                    arcColor: Colors.green.shade100,
                    tailIcon: Icons.star,
                  ),
                ),

                ProgressCircle.fromValues(
                  total: 100,
                  completed: 85,
                  style: ProgressCircleStyle(
                    progressArcColor: Colors.purple,
                    arcColor: Colors.purple.shade100,
                    headIcon: Icons.apple,
                    tailIcon: Icons.star,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}