Flutter颜色选择器插件dooz_color_picker的使用

Flutter颜色选择器插件dooz_color_picker的使用

dooz_color_picker 是一个 Flutter 包，它提供了小部件，使用户能够通过圆形滑块选择颜色和一些 RGB 灯的其他参数。

获取开始

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

dependencies:
  dooz_color_picker: ^版本号

然后运行 flutter pub get 来获取该包。

使用示例

以下是一个完整的示例，展示了如何使用 dooz_color_picker 插件。

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

void main() => runApp(const ColorPickerApp());

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

  [@override](/user/override)
  _ColorPickerAppState createState() => _ColorPickerAppState();
}

class _ColorPickerAppState extends State<ColorPickerApp> {
  Color? pickerColor; // 用于存储选择的颜色

  // 用于存储温度色和值
  Color? kelvinColor;
  int? kelvinValue;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ColorPicker",
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text("ColorPicker"),
        ),
        body: Builder(
          builder: (context) {
            return Center(
              child: FittedBox(
                fit: BoxFit.scaleDown,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    // 圆形颜色选择器
                    CircleColorPicker(
                      thumbRadius: 15, // 滑块半径
                      radius: MediaQuery.of(context).size.width / 2 - 40, // 选择器半径
                      initialColor: Colors.red, // 初始颜色
                      child: Text(pickerColor?.toString() ?? ''), // 显示当前颜色
                      colorListener: (Color value) { // 颜色监听器
                        setState(() {
                          pickerColor = value;
                        });
                      },
                    ),
                    // 圆形温度选择器
                    CircleTemperaturePicker(
                      thumbRadius: 15, // 滑块半径
                      radius: MediaQuery.of(context).size.width / 2 - 40, // 选择器半径
                      initialTemperature: 2600, // 初始温度
                      startTemperature: 2600, // 温度范围起始
                      endTemperature: 10600, // 温度范围结束
                      colorListener: (Color value, int kDegree) { // 颜色和温度监听器
                        setState(() {
                          kelvinColor = value;
                          kelvinValue = kDegree;
                        });
                      },
                      child: Text(
                        '${kelvinColor?.toString() ?? ''}\n' // 显示当前颜色
                        '${kelvinValue?.toString() ?? ''}', // 显示当前温度
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

更多关于Flutter颜色选择器插件dooz_color_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter颜色选择器插件dooz_color_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


dooz_color_picker 是一个用于 Flutter 的颜色选择器插件。它提供了一个简单的界面，允许用户选择颜色。以下是如何在 Flutter 应用中使用 dooz_color_picker 的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 dooz_color_picker 的依赖。

dependencies:
  flutter:
    sdk: flutter
  dooz_color_picker: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中，导入 dooz_color_picker 包。

import 'package:dooz_color_picker/dooz_color_picker.dart';

3. 使用颜色选择器

你可以使用 DoozColorPicker 组件来显示颜色选择器。通常你会将其放在一个按钮的点击事件中，或者在其他需要用户选择颜色的场景中使用。

class ColorPickerExample extends StatefulWidget {
  @override
  _ColorPickerExampleState createState() => _ColorPickerExampleState();
}

class _ColorPickerExampleState extends State<ColorPickerExample> {
  Color _selectedColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              color: _selectedColor,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final Color? pickedColor = await showDialog<Color>(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: Text('Pick a color'),
                      content: DoozColorPicker(
                        selectedColor: _selectedColor,
                        onColorChanged: (Color color) {
                          _selectedColor = color;
                        },
                      ),
                      actions: <Widget>[
                        TextButton(
                          child: Text('OK'),
                          onPressed: () {
                            Navigator.of(context).pop(_selectedColor);
                          },
                        ),
                      ],
                    );
                  },
                );

                if (pickedColor != null) {
                  setState(() {
                    _selectedColor = pickedColor;
                  });
                }
              },
              child: Text('Pick Color'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

现在你可以运行你的 Flutter 应用，并点击 “Pick Color” 按钮来打开颜色选择器。选择一个颜色后，应用的背景色会更新为你选择的颜色。

5. 配置颜色选择器

DoozColorPicker 提供了多种配置选项，例如可以禁用透明度、设置默认颜色等。你可以在 DoozColorPicker 组件的构造函数中传递这些参数来定制颜色选择器的行为。

DoozColorPicker(
  selectedColor: _selectedColor,
  onColorChanged: (Color color) {
    setState(() {
      _selectedColor = color;
    });
  },
  enableOpacity: true, // 启用透明度
  showLabel: true, // 显示颜色标签
  pickerColorHue: true, // 启用色相选择
)
回到顶部