Flutter圆形进度条插件dashed_circular_progress_bar的使用

简介

Dashed circular progress bar 是一个开源的Flutter包，用于在Flutter应用程序中创建带有虚线效果的圆形进度条。它提供了多种自定义选项，可以轻松地集成到你的项目中。

版本和兼容性

• License: MIT License
• Version: 0.0.6
• Flutter: 3.13.5
• Dart: 3.1.2

安装

要在你的Flutter项目中使用dashed_circular_progress_bar，你需要先将其添加到pubspec.yaml文件的依赖项中：

dependencies:
  dashed_circular_progress_bar: ^0.0.6

然后，在需要使用的Dart文件中导入该包：

import 'package:dashed_circular_progress_bar/dashed_circular_progress_bar.dart';

基本示例

示例1 - 简单进度条

要创建一个简单的圆形进度条，首先需要定义一个ValueNotifier来跟踪进度值的变化：

final ValueNotifier<double> _valueNotifier = ValueNotifier(0);

然后将它添加到Widget中：

DashedCircularProgressBar.aspectRatio(
  aspectRatio: 1, // 宽高比
  valueNotifier: _valueNotifier,
  progress: 478,
  maxProgress: 670,
  corners: StrokeCap.butt,
  foregroundColor: Colors.blue,
  backgroundColor: const Color(0xffeeeeee),
  foregroundStrokeWidth: 36,
  backgroundStrokeWidth: 36,
  animation: true,
  child: Center(
    child: ValueListenableBuilder(
      valueListenable: _valueNotifier,
      builder: (_, double value, __) => Text(
        '${value.toInt()}%',
        style: const TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.w300,
          fontSize: 60
        ),
      ),
    ),
  ),
)

示例2 - 虚线背景进度条

此示例展示了如何创建具有虚线背景的进度条：

DashedCircularProgressBar.aspectRatio(
  aspectRatio: 2, // 宽高比
  progress: 34,
  startAngle: 270,
  sweepAngle: 180,
  circleCenterAlignment: Alignment.bottomCenter,
  foregroundColor: Colors.black,
  backgroundColor: const Color(0xffeeeeee),
  foregroundStrokeWidth: 3,
  backgroundStrokeWidth: 2,
  backgroundGapSize: 2,
  backgroundDashSize: 1,
  seekColor: Colors.yellow,
  seekSize: 22,
  animation: true,
)

示例3 - 更复杂的进度条

这个例子展示了更复杂的进度条，包括文本和其他样式：

DashedCircularProgressBar.aspectRatio(
  aspectRatio: 1, // 宽高比
  valueNotifier: _valueNotifier,
  progress: 37,
  startAngle: 225,
  sweepAngle: 270,
  foregroundColor: Colors.green,
  backgroundColor: const Color(0xffeeeeee),
  foregroundStrokeWidth: 15,
  backgroundStrokeWidth: 15,
  animation: true,
  seekSize: 6,
  seekColor: const Color(0xffeeeeee),
  child: Center(
    child: ValueListenableBuilder(
      valueListenable: _valueNotifier,
      builder: (_, double value, __) => Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            '${value.toInt()}%',
            style: const TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w300,
              fontSize: 60
            ),
          ),
          Text(
            'Accuracy',
            style: const TextStyle(
              color: Color(0xffeeeeee),
              fontWeight: FontWeight.w400,
              fontSize: 16
            ),
          ),
        ],
      )
    ),
  ),
)

示例4 - 虚线进度条

你可以使用指定的尺寸而不是宽高比来创建进度条：

DashedCircularProgressBar.square(
  dimensions: 350,
  progress: 180,
  maxProgress: 360,
  startAngle: -27.5,
  foregroundColor: Colors.redAccent,
  backgroundColor: const Color(0xffeeeeee),
  foregroundStrokeWidth: 7,
  backgroundStrokeWidth: 7,
  foregroundGapSize: 5,
  foregroundDashSize: 55,
  backgroundGapSize: 5,
  backgroundDashSize: 55,
  animation: true,
  child: const Icon(
    Icons.favorite,
    color: Colors.redAccent,
    size: 126
  ),
)

示例5 - 圆心对齐

通过改变圆心位置，你可以指定进度条的位置：

DashedCircularProgressBar.aspectRatio(
  aspectRatio: 1, // 宽高比
  progress: 60,
  startAngle: 90,
  sweepAngle: 90,
  corners: StrokeCap.butt,
  foregroundStrokeWidth: 7,
  backgroundStrokeWidth: 7,
  circleCenterAlignment: Alignment.topLeft,
  foregroundColor: Colors.white,
  backgroundColor: const Color(0x22000000),
  animation: true
)

参数描述

以下是DashedCircularProgressBar的主要参数及其默认值和说明：

通过这些参数，你可以灵活地调整进度条的外观和行为，以满足你的应用需求。