Flutter弧形进度条插件arc_progress_bar_new的使用

Arc Progress Bar

Arc Progress Bar 是一个开源的Flutter包，它简化了创建曲线或弧形进度条小部件的过程。它为用户提供了一整套自定义选项，负责处理复杂的曲线计算和动画。

添加依赖

在您的pubspec.yaml文件中添加以下依赖项：

dependencies:
  arc_progress_bar: ^1.0.4

如何使用

首先确保导入包：

import 'package:arc_progress_bar_new/arc_progress_bar_new.dart';

然后只需根据需要自定义小部件的参数。下面是一个基本的例子：

ArcProgressBar(
  percentage: _progressPercentage,
  arcThickness: 5,
  innerPadding: 16,
  animateFromLastPercent: true,
  handleSize: 10,
  backgroundColor: Colors.black12,
  foregroundColor: Colors.black,
)

示例与实现

示例1 - 自定义颜色和手柄

ArcProgressBar(
  percentage: _progressPercentage,
  arcThickness: 15,
  innerPadding: 48,
  strokeCap: StrokeCap.round,
  handleSize: 50,
  handleWidget: Container(
    decoration: const BoxDecoration(color: Colors.red),
  ),
  foregroundColor: Colors.redAccent,
  backgroundColor: Colors.red.shade100,   
)

示例2 - 带图标和文本

ArcProgressBar(
  percentage: _progressPercentage,
  bottomLeftWidget: const Text("Level 3"),
  bottomRightWidget: const Text("240/300"),
  bottomCenterWidget: const Text("RECRUIT"),
  centerWidget: Image.asset("assets/images/insignia.png",
      height: 200, width: 200, fit: BoxFit.contain),
)

示例3 - 简单且可自定义

ArcProgressBar(
  percentage: _progressPercentage,
  arcThickness: 5,
  innerPadding: 16,
  animateFromLastPercent: true,
  handleSize: 10,
  backgroundColor: Colors.black12,
  foregroundColor: Colors.black,
)

非常易于自定义，您可以根据自己的喜好进行调整！😎

完整示例代码

这里提供了一个完整的演示代码，展示了如何将不同的ArcProgressBar实例组合到一个应用中，并通过滑块来动态改变进度百分比：

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ArcProgressBarApp(),
    );
  }
}

class ArcProgressBarApp extends StatefulWidget {
  const ArcProgressBarApp({super.key});

  @override
  State<ArcProgressBarApp> createState() => _ArcProgressBarAppState();
}

class _ArcProgressBarAppState extends State<ArcProgressBarApp> {
  double _progressPercentage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Arc Progress Bar Demo"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            // With icons and texts widgets
            ArcProgressBar(
              percentage: _progressPercentage,
              bottomLeftWidget: const Text("Level 3"),
              bottomRightWidget: const Text("240/300"),
              bottomCenterWidget: const Text("RECRUIT"),
              centerWidget: Image.asset("assets/images/insignia.png",
                  height: 200, width: 200, fit: BoxFit.contain),
            ),

            // With different colors
            ArcProgressBar(
              percentage: _progressPercentage,
              arcThickness: 15,
              innerPadding: 48,
              strokeCap: StrokeCap.round,
              handleSize: 50,
              handleWidget: Container(
                decoration: const BoxDecoration(color: Colors.red),
              ),
              foregroundColor: Colors.redAccent,
              backgroundColor: Colors.red.shade100,
            ),

            // Simple arc progress bar
            ArcProgressBar(
              percentage: _progressPercentage,
              arcThickness: 5,
              foregroundColor: Colors.blue,
              innerPadding: 64,
            ),

            const Padding(
              padding: EdgeInsets.symmetric(vertical: 32),
              child: Divider(
                color: Colors.black38,
              ),
            ),
            Slider(
              value: _progressPercentage,
              min: 0,
              max: 100,
              onChanged: (val) {
                setState(() {
                  _progressPercentage = val;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

请注意，在实际项目中，您可能需要根据实际情况调整图片路径和其他资源引用。希望这些信息对您有所帮助！