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

简介

circular_seek_bar 是一个用于Flutter的圆形进度条/滑块组件，支持自定义动画、虚线和渐变等特性。它可以帮助开发者轻松创建各种风格的圆形进度条或滑块。

安装

要开始使用这个插件，请按照以下步骤操作：

1. Depend on it

在你的项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  circular_seek_bar: ^1.1.0

或者直接通过命令行添加：

flutter pub add circular_seek_bar

2. Install it

运行以下命令安装包：

flutter pub get

3. Import it

然后，在你的Dart代码中导入该库：

import 'package:circular_seek_bar/circular_seek_bar.dart';

基本用法示例

下面是一个完整的示例应用，展示了如何配置并使用 CircularSeekBar 组件。此示例包括了对进度、角度、宽度、是否使用渐变、圆角样式、动画效果、滑块可见性及交互性的实时调整。

示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter circular_seek_bar example',
      theme: ThemeData(
        primaryColor: Colors.blue,
        brightness: Brightness.dark,
      ),
      home: const CircularSeekBarExamplePage(),
    );
  }
}

class CircularSeekBarExamplePage extends StatefulWidget {
  const CircularSeekBarExamplePage({Key? key}) : super(key: key);

  @override
  State<CircularSeekBarExamplePage> createState() => _CircularSeekBarExamplePageState();
}

class _CircularSeekBarExamplePageState extends State<CircularSeekBarExamplePage> {
  final ValueNotifier<double> _valueNotifier = ValueNotifier(0);

  double _progress = 90;
  double _startAngle = 45;
  double _sweepAngle = 270;
  double _dashWidth = 0;
  double _dashGap = 0;
  double _barWidth = 8.0;
  bool _useGradient = true;
  bool _rounded = true;
  bool _animation = true;
  bool _thumbVisible = true;
  bool _interactive = true;

  @override
  void dispose() {
    _valueNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter circular_seek_bar example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            CircularSeekBar(
              width: double.infinity,
              progress: _progress,
              height: 250,
              barWidth: _barWidth,
              startAngle: _startAngle,
              sweepAngle: _sweepAngle,
              strokeCap: _rounded ? StrokeCap.round : StrokeCap.butt,
              progressGradientColors: _useGradient
                  ? [
                      Colors.red,
                      Colors.orange,
                      Colors.yellow,
                      Colors.green,
                      Colors.blue,
                      Colors.indigo,
                      Colors.purple
                    ]
                  : [],
              dashWidth: _dashWidth,
              dashGap: _dashGap,
              animation: _animation,
              curves: Curves.linear,
              innerThumbRadius: _thumbVisible ? 5 : 0,
              innerThumbStrokeWidth: _thumbVisible ? 3 : 0,
              outerThumbRadius: _thumbVisible ? 5 : 0,
              outerThumbStrokeWidth: _thumbVisible ? 10 : 0,
              valueNotifier: _valueNotifier,
              interactive: _interactive,
              child: Center(
                child: ValueListenableBuilder(
                    valueListenable: _valueNotifier,
                    builder: (_, double value, __) => Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Text('${value.round()}',
                                style: TextStyle(color: Colors.white)),
                            Text('progress',
                                style: TextStyle(color: Colors.grey)),
                          ],
                        )),
              ),
            ),
            const SizedBox(height: 20,),
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    // 滑动条和其他控件来动态改变属性...
                    // （这部分内容与上面提供的示例相同）
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

属性说明

以下是 CircularSeekBar 的一些主要属性及其默认值：

结论

通过上述介绍，你应该已经了解了如何在Flutter项目中集成和使用 circular_seek_bar 插件。你可以根据实际需求调整各个参数以实现不同的视觉效果。如果你有任何问题或者需要进一步的帮助，请参考官方文档或访问GitHub仓库获取更多信息。