Flutter多圆形滑块插件multi_circular_slider的使用

multi_circular_slider 是一个高度可定制的进度条插件，它可以帮助在单个进度条中显示多个值，并且每个值可以用不同的颜色表示，还带有动画效果。

预览

开始使用

安装

首先，在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  multi_circular_slider: ^1.1.0

然后，在项目根目录下运行以下命令以获取包：

flutter packages get

基本用法

导入包

在 Dart 文件中导入 multi_circular_slider 包：

import 'package:multi_circular_slider/multi_circular_slider.dart';

使用MultiCircularSlider

接下来，可以按照如下方式使用 MultiCircularSlider 组件：

MultiCircularSlider(
    size: MediaQuery.of(context).size.width * 0.8,
    progressBarType: MultiCircularSliderType.circular,
    values: [0.2, 0.1, 0.3, 0.25],
    colors: [Color(0xFFFD1960), Color(0xFF29D3E8), Color(0xFF18C737), Color(0xFFFFCC05)],
    showTotalPercentage: true,
),

这段代码将创建一个多段圆形进度条，每段占总长度的比例分别为20%、10%、30%和25%，并用不同颜色区分。同时会在中间显示总的百分比。

参数详解

示例代码

下面是一个完整的示例代码，展示了如何在一个Flutter应用中集成和使用 MultiCircularSlider：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Multi Progress Bar',
      home: MyTestWidget(),
    );
  }
}

class MyTestWidget extends StatelessWidget {
  const MyTestWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Center(
          child: MultiCircularSlider(
            size: MediaQuery.of(context).size.width * 0.8,
            progressBarType: MultiCircularSliderType.circular,
            values: const [0.2, 0.1, 0.3, 0.28],
            colors: const [Color(0xFFFD1960), Color(0xFF29D3E8), Color(0xFF18C737), Color(0xFFFFCC05)],
            showTotalPercentage: true,
            label: 'This is label text',
            animationDuration: const Duration(milliseconds: 1000),
            animationCurve: Curves.easeInOutCirc,
            innerIcon: const Icon(Icons.integration_instructions),
            trackColor: Colors.white,
            progressBarWidth: 36.0,
            trackWidth: 36.0,
            labelTextStyle: const TextStyle(),
            percentageTextStyle: const TextStyle(),
          ),
        ),
      ),
    );
  }
}

这个例子创建了一个包含多段圆形进度条的应用程序界面。你可以根据需要调整各个参数来适应自己的需求。