Flutter自定义圆形进度指示器插件custom_circular_progress_indicated的使用

Custom Circular Progress Indicator

一个为Flutter提供的可定制圆形进度指示器插件，支持带有虚线未填充部分和动画效果。

特性

• 支持自定义颜色的圆形进度指示器
• 可配置的虚线未填充部分
• 更新进度时平滑的动画效果
• 可自定义大小和描边宽度

开始使用

在pubspec.yaml文件中添加依赖：

dependencies:
  custom_circular_progress: ^0.0.1

运行flutter pub get以安装依赖。

使用方法

以下是一个基本的使用示例：

import 'package:custom_circular_progress/custom_circular_progress.dart';

CustomCircularProgressIndicator(
  progress: 0.7, // 当前进度值（范围为0.0到1.0）
  filledColor: Colors.blue, // 已完成部分的颜色
  unfilledColor: Colors.grey, // 未完成部分的颜色
  strokeWidth: 10, // 描边宽度
  size: 100, // 指示器的直径
)

完整示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用custom_circular_progress_indicated插件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '自定义圆形进度指示器示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '自定义圆形进度指示器'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _progress = 0.0;

  void _incrementProgress() {
    setState(() {
      _progress = (_progress + 0.1).clamp(0.0, 1.0); // 确保进度在0.0到1.0之间
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 基本用法
            Text(
              '基本用法:',
              style: Theme.of(context).textTheme.headline6,
            ),
            SizedBox(height: 20),
            CustomCircularProgressIndicator(
              progress: _progress, // 动态更新的进度值
              filledColor: Colors.blue, // 已完成部分的颜色
              unfilledColor: Colors.grey.shade300, // 未完成部分的颜色
            ),
            SizedBox(height: 40),

            // 自定义颜色和大小
            Text(
              '自定义颜色和大小:',
              style: Theme.of(context).textTheme.headline6,
            ),
            SizedBox(height: 20),
            CustomCircularProgressIndicator(
              progress: _progress,
              filledColor: Colors.green, // 已完成部分的颜色
              unfilledColor: Colors.red.shade100, // 未完成部分的颜色
              size: 150, // 指示器的直径
              strokeWidth: 15, // 描边宽度
            ),
            SizedBox(height: 40),

            // 多个指示器
            Text(
              '多个指示器:',
              style: Theme.of(context).textTheme.headline6,
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                CustomCircularProgressIndicator(
                  progress: _progress, // 第一个指示器的进度
                  filledColor: Colors.purple, // 已完成部分的颜色
                  unfilledColor: Colors.purple.shade100, // 未完成部分的颜色
                  size: 80, // 指示器的直径
                  strokeWidth: 8, // 描边宽度
                ),
                CustomCircularProgressIndicator(
                  progress: _progress * 0.7, // 第二个指示器的进度
                  filledColor: Colors.orange, // 已完成部分的颜色
                  unfilledColor: Colors.orange.shade100, // 未完成部分的颜色
                  size: 80, // 指示器的直径
                  strokeWidth: 8, // 描边宽度
                ),
                CustomCircularProgressIndicator(
                  progress: _progress * 1.3, // 第三个指示器的进度
                  filledColor: Colors.teal, // 已完成部分的颜色
                  unfilledColor: Colors.teal.shade100, // 未完成部分的颜色
                  size: 80, // 指示器的直径
                  strokeWidth: 8, // 描边宽度
                ),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementProgress, // 点击按钮时增加进度
        tooltip: '增加进度',
        child: Icon(Icons.add),
      ),
    );
  }
}