Flutter自定义圆形进度条插件custom_circular_progress的使用

欢迎来到Custom Circular Progress Indicator项目！这个Flutter项目提供了一个具有动画和色彩效果的可定制圆形进度指示器。

目录

• 介绍
• 特性
• 开始使用
• 使用方法
• 贡献
• 许可证

介绍

Custom Circular Progress Indicator是一个Flutter包，它提供了具有多种定制选项的圆形进度指示器，包括动画、颜色过渡等。

特性

• 创建带有自定义设置的圆形进度指示器。
• 可调整速度和缓动曲线的圆形进度动画。
• 动态着色进度单元。
• 简单直接的使用方式。

开始使用

要将Custom Circular Progress Indicator集成到你的Flutter项目中，请按照以下步骤操作：

1. 在pubspec.yaml文件中添加包：

   dependencies:
     custom_circular_progress: ^latest_version
   

2. 运行以下命令安装依赖项：

   flutter pub get
   

使用方法

导入包并在你的小部件构建方法中使用CustomCircularProgress小部件来创建自定义圆形进度指示器：

import 'package:custom_circular_progress/custom_circular_progress.dart';

// 在你的小部件构建方法中
CustomCircularProgress(
  details: IndicatorDetails(value: 0.2, itemCount: 10),
  color: Colors.blue,
  // 添加更多自定义设置
)

完整示例代码

下面是一个完整的示例，展示如何在Flutter应用中使用custom_circular_progress插件，并允许用户通过UI动态调整各种参数。

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Object _key = Object();

  double value = 0.5;
  int itemCount = 10;
  final TextEditingController _colorController = TextEditingController(text: '0xFFF44336');
  final TextEditingController _altColorController = TextEditingController(text: '0xFF000000');
  final TextEditingController _bgColorController = TextEditingController(text: '0xFF020424');
  double height = 20;
  double width = 20;
  double radius = 50;
  double unitBorderRadius = 0;
  Curve curve = Curves.easeOut;
  bool stopController = false;
  bool stopColorController = false;
  int animationSeconds = 4;
  int colorSeconds = 3;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SizedBox(
          height: 1200,
          width: 720,
          child: SingleChildScrollView(
            child: Column(
              children: [
                const SizedBox(height: 30),
                CustomCircularProgress(
                  key: ValueKey<Object>(_key),
                  details: IndicatorDetails(value: value, itemCount: itemCount),
                  color: Color(int.parse(_colorController.text)),
                  alternativeColor: Color(int.parse(_altColorController.text)),
                  backgroundColor: Color(int.parse(_bgColorController.text)),
                  unitSize: Size(width, height),
                  radius: radius,
                  unitBorderRadius: BorderRadius.circular(unitBorderRadius),
                  animationDuration: Duration(seconds: animationSeconds),
                  colorDuration: Duration(seconds: colorSeconds),
                  curve: curve,
                  stopController: stopController,
                  stopColorController: stopColorController,
                ),
                const SizedBox(height: 30),
                MaterialButton(
                  onPressed: () {
                    stopController = !stopController;
                    _key = Object();
                    setState(() {});
                  },
                  child: Text(stopController ? 'Start Animation' : 'Stop Animation'),
                ),
                MaterialButton(
                  onPressed: () {
                    stopColorController = !stopColorController;
                    _key = Object();
                    setState(() {});
                  },
                  child: Text(stopColorController ? 'Start Color Animation' : 'Stop Color Animation'),
                ),
                // 更多控件以供动态调整参数...
              ],
            ),
          ),
        ),
      ),
    );
  }
}

贡献

欢迎贡献！如果你发现任何问题或想要增强包的功能，请随时创建拉取请求。

许可证

该项目根据MIT许可证发布。

作者

Dilip Yadav， 可以通过LinkedIn与我联系。