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

faabul_color_picker 是一个用于Flutter应用的颜色选择器插件，由 Faabul Live Quizzes 开发和使用。该插件提供了一个简单易用的颜色选择对话框，允许用户从预定义的颜色中选择或自定义颜色。

使用步骤

1. 基本使用

要显示颜色选择对话框并等待结果，请调用 showColorPickerDialog() 方法：

final color = await showColorPickerDialog(context: context);

2. 设置初始颜色

大多数情况下，您可能希望指定当前选中的颜色。如果允许用户取消选择颜色，可以将 allowUnselectButton 参数设置为 true：

final color = await showColorPickerDialog(
  context: context,
  selected: selectedColor, // 当前选中的颜色
  allowUnselectButton: true, // 是否允许取消选择颜色
);

3. 自定义颜色

如果您希望使用自定义颜色，可以通过 colors 参数传递颜色列表：

final color = await showColorPickerDialog(
  context: context,
  selected: selectedColor,
  colors: [
    FaabulColorShades(color: Colors.red, shades: [
       Colors.red,
       Colors.redAccent,
    ]),
    FaabulColorShades(color: Colors.green, shades: [
       Colors.lightGreen,
       Colors.green,
       Colors.lightGreenAccent,
       Colors.greenAccent,
    ]),
    FaabulColorShades(color: Colors.blue, shades: [
        Colors.lightBlue,
        Colors.blue,
        Colors.lightBlueAccent,
        Colors.blueAccent,
    ]),
  ],
);

4. 其他公开类

• FaabulColorPicker: 这是显示在 showColorPickerDialog 内部的控件。如果您想以不同的方式选择颜色，可以直接使用它。

• FaabulColorButton: 这是一个用于表示单个 Color 的按钮控件。

• FaabulColorSample: 这是一个用于展示 Color 的圆形控件。

完整示例代码

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

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(colorSchemeSeed: Colors.purple, useMaterial3: true),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  Color? _selectedColor;
  bool _allowUnselectButton = false;
  bool _customColors = false;

  static const _kCustomColors = [
    FaabulColorShades(color: Colors.red, shades: [
      Colors.red,
      Colors.redAccent,
    ]),
    FaabulColorShades(color: Colors.green, shades: [
      Colors.lightGreen,
      Colors.green,
      Colors.lightGreenAccent,
      Colors.greenAccent,
    ]),
    FaabulColorShades(color: Colors.blue, shades: [
      Colors.lightBlue,
      Colors.blue,
      Colors.lightBlueAccent,
      Colors.blueAccent,
    ]),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    final theme = ThemeData.from(
      colorScheme: ColorScheme.fromSeed(seedColor: _selectedColor ?? Colors.purple),
      useMaterial3: true,
    );
    return Theme(
      data: theme,
      child: Scaffold(
        backgroundColor: _selectedColor,
        body: Center(
          child: SizedBox(
            width: 400,
            height: 400,
            child: Card(
              child: Column(
                children: [
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          if (_selectedColor == null)
                            const Text('No color selected')
                          else
                            Wrap(
                              spacing: 4,
                              children: [
                                const Text('Selected color:'),
                                FaabulColorSample(color: _selectedColor!),
                              ],
                            ),
                          FilledButton(
                            onPressed: _handlePickColor,
                            child: const Text('Pick a color'),
                          ),
                        ],
                      ),
                    ),
                  ),
                  SwitchListTile.adaptive(
                    title: const Text('Allow unselect button'),
                    value: _allowUnselectButton,
                    onChanged: (value) => setState(() => _allowUnselectButton = value),
                  ),
                  SwitchListTile.adaptive(
                    title: const Text('Custom colors'),
                    value: _customColors,
                    onChanged: (value) => setState(() => _customColors = value),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Future<void> _handlePickColor() async {
    final color = await showColorPickerDialog(
      context: context,
      selected: _selectedColor,
      allowUnselectButton: _allowUnselectButton,
      colors: _customColors ? _kCustomColors : null,
    );
    if (!mounted) return;
    setState(() => _selectedColor = color);
  }
}