Flutter旋钮控制插件flutter_dial_knob的使用

Knob

一个可定制的拨盘旋钮组件，用于Flutter应用。

特性

• 兼容Dart 3
• 可自定义轨道、级别、旋钮和指示器的颜色
• 级别指示器支持渐变
• 可调整大小

安装

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_dial_knob: ^0.0.2

然后运行以下命令来获取依赖包：

flutter pub get

或者

flutter pub add flutter_dial_knob

使用

在你的Dart文件中导入该包：

import 'package:flutter_dial_knob/flutter_dial_knob.dart';

然后在你的Flutter应用中使用DialKnob组件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dial Knob Example'),
        ),
        body: Center(
          child: DialKnob(
            value: 0.5,
            onChanged: (newValue) {
              print(newValue);
            },
            min: 0,
            max: 1,
            size: 100,
            trackColor: Colors.grey,
            levelColorStart: Colors.green,
            levelColorEnd: Colors.red,
            knobColor: Colors.blue,
            indicatorColor: Colors.white,
          ),
        ),
      ),
    );
  }
}

可定制属性

• value: 旋钮的当前值。
• onChanged: 值变化时的回调函数。
• min: 最小值（默认为0）。
• max: 最大值（默认为1）。
• size: 旋钮的大小（默认为72）。
• child: 旋钮的子组件。
• trackColor: 轨道颜色。
• levelColorStart: 级别渐变的起始颜色。
• levelColorEnd: 级别渐变的结束颜色。
• levelColor: 级别的纯色。
• knobColor: 旋钮的颜色。
• indicatorColor: 指示器的颜色。

示例

以下是一个完整的示例：

DialKnob(
  value: 0.5,
  onChanged: (newValue) {
    print(newValue);
  },
  min: 0,
  max: 1,
  size: 100,
  trackColor: Colors.grey,
  levelColorStart: Colors.green,
  levelColorEnd: Colors.red,
  knobColor: Colors.blue,
  indicatorColor: Colors.white,
)

完整示例代码

以下是从官方仓库中提取的一个完整示例：

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

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

class DialKnobExampleApp extends StatelessWidget {
  const DialKnobExampleApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dial Knob Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const DialKnobExamplePage(),
    );
  }
}

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

  [@override](/user/override)
  State<DialKnobExamplePage> createState() => DialKnobExamplePageState();
}

class DialKnobExamplePageState extends State<DialKnobExamplePage> {
  double _knobOneValue = 0.5;
  double _knobTwoValue = 10;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dial Knob Example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(72),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  DialKnob(
                    value: _knobOneValue,
                    onChanged: (newValue) {
                      setState(() {
                        _knobOneValue = newValue;
                      });
                    },
                    min: 0,
                    max: 1,
                    size: 72,
                    trackColor: const Color.fromARGB(255, 61, 61, 61),
                    levelColorStart: Colors.blue,
                    levelColorEnd: const Color.fromARGB(255, 19, 255, 251),
                    knobColor: const Color.fromARGB(255, 58, 58, 58),
                    indicatorColor: const Color.fromARGB(255, 255, 255, 255),
                  ),
                  const SizedBox(height: 20),
                  Text(
                    _knobOneValue.toStringAsFixed(2),
                    style: const TextStyle(fontSize: 14),
                  ),
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  DialKnob(
                    value: _knobTwoValue,
                    onChanged: (newValue) {
                      setState(() {
                        _knobTwoValue = newValue;
                      });
                    },
                    min: 0,
                    max: 100,
                    size: 72,
                    trackColor: const Color.fromARGB(255, 61, 61, 61),
                    levelColorStart: const Color.fromARGB(255, 209, 10, 10),
                    levelColorEnd: const Color.fromARGB(255, 255, 183, 0),
                    knobColor: const Color.fromARGB(255, 58, 58, 58),
                    indicatorColor: const Color.fromARGB(255, 255, 255, 255),
                  ),
                  const SizedBox(height: 20),
                  Text(
                    _knobTwoValue.toStringAsFixed(2),
                    style: const TextStyle(fontSize: 14),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}