Flutter拨号功能插件flutter_dial的使用

功能介绍

flutter_dial 插件实现了一个用于输入和视觉显示的拨号器。该拨号器开始时是一个带有透明背景的图像（例如png、gif、tiff）。

为了保持任何图像的拟态感，图像不会旋转。一个视觉旋转指示器提供了拨号位置的反馈。

当通过点击选择一个拨号器时，会显示一个半透明的控制环，可以通过旋转来操作。控制环的颜色、宽度和不透明度都是可编程的。如果拨号器未被选中，则不能操作。

控制环可以有单一颜色，也可以用冷热色渐变来着色。

拨号器可以通过第二次点击取消选择。此外，拨号器是可以聚焦的小部件。当其他可聚焦小部件（包括拨号器）被选中时，前一个拨号器将取消选择以避免输入错误。

拨号器可以在 [0.0, 360] 度范围内无限旋转，或者可以编程为具有固定数量的均匀分布的径向停止点。

回调闭包函数 onDialed() 暴露了拨号器当前的旋转值，形式为当前的 (度数, 百分比, 停止编号)。

通过 Dial.value 可以提供初始状态的持久性，Dial.onDialed() 回调中的 percent 值提供了当前状态。

当拨号器接收或失去焦点时，Dial.onFocusChange() 将被调用。这允许对与拨号器相关的控件进行外部编程效果（例如高亮、加粗）。

示例演示

示例1：带仪表的拨号器

此示例展示了：

1. 点击以获取/取消焦点
2. 旋转拨号器
3. 仪表响应输出

当拨号器获得焦点时，仪表会根据拨号器的位置进行响应。

示例2：多个拨号器在模拟LED显示屏上监控输出

此示例展示了：

1. 自动在拨号器之间切换焦点
2. LED面板通过亮度指示活动的拨号器
3. 不同颜色的拨号器控制环
4. 两个具有径向停止点的拨号器
5. 一个可在0到100%之间无限调整的拨号器
6. 一种类似洗衣机的冷热控制环，表示百分比增加

开始使用

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

   dependencies:
     flutter_dial: ^any
   

2. 在你的 Dart 实现文件中导入 flutter_dial 包：

   import 'package:flutter_dial/flutter_dial.dart';
   

3. 使用 Dial(size, ringWidth, color, image, ...) 小部件。

示例代码

以下是一个完整的示例代码，展示如何使用 flutter_dial 插件。

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _position = 0;
  final double _value = 30.0;
  final TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller.text = _value.toStringAsFixed(1);
    _position = 5;
  }

  void _setPosition(int stopNumber) {
    if (_position != stopNumber) {
      setState(() => _position = stopNumber);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Dial setting:'),
            Text('$_position', style: Theme.of(context).textTheme.headlineMedium),
            const SizedBox(height: 40),
            Dial(
              key: ValueKey(_value),
              value: _value,
              image: Image.asset('assets/images/256_knob.png'), // 确保你的图像路径正确
              size: 200,
              ringWidth: 200 / 4,
              stopCount: 10,
              color: Colors.teal,
              indicatorWidth: 2,
              indicatorLength: 200 / 4,
              indicatorColor: Colors.black,
              opacity: 0.5,
              onDialed: (degrees, percent, stopNumber) => _setPosition(stopNumber),
            ),
          ],
        ),
      ),
    );
  }
}