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

Flutter Material Color Picker

Material Color picker 是一个可定制化的Flutter小部件。默认情况下，它是Material Colors，但你可以定义自己的颜色。你还可以使用 CircleColor 小部件在应用中显示颜色。例如，你可以将颜色选择器设置在一个对话框中，并在 ListTile 中显示所选颜色，用于设置。

如何使用它

添加到你的Flutter项目

只需将 flutter_material_color_picker 作为依赖项添加到你的 pubspec.yaml 文件中。

dependencies:
  flutter_material_color_picker: ^1.2.0

导入

在Dart文件中导入包：

import 'package:flutter_material_color_picker/flutter_material_color_picker.dart';

基本用法

下面是一个简单的 MaterialColorPicker 示例：

MaterialColorPicker(
    onColorChange: (Color color) {
        // 处理颜色变化
    },
    selectedColor: Colors.red
)

监听主色变化

你可以监听主色的变化：

MaterialColorPicker(
    onColorChange: (Color color) {
        // 处理颜色变化
    },
    onMainColorChange: (ColorSwatch color) {
        // 处理主色变化
    },
    selectedColor: Colors.red
)

禁用色调

如果你只想显示和允许选择主色，可以禁用色调：

MaterialColorPicker(
    allowShades: false, // 默认为true
    onMainColorChange: (ColorSwatch color) {
        // 处理主色变化
    },
    selectedColor: Colors.red
)

自定义颜色

你可以定义自定义颜色列表：

MaterialColorPicker(
    onColorChange: (Color color) {
        // 处理颜色变化
    },
    selectedColor: Colors.red,
    colors: [
        Colors.red,
        Colors.deepOrange,
        Colors.yellow,
        Colors.lightGreen
    ],
)

示例代码

以下是一个完整的示例应用程序，展示了如何在不同的场景中使用 MaterialColorPicker。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Material Color Picker",
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  HomeScreenState createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  // 使用临时变量以仅在按下对话框的“提交”按钮时更新颜色
  ColorSwatch? _tempMainColor;
  Color? _tempShadeColor;
  ColorSwatch? _mainColor = Colors.blue;
  Color? _shadeColor = Colors.blue[800];

  void _openDialog(String title, Widget content) {
    showDialog(
      context: context,
      builder: (_) {
        return AlertDialog(
          contentPadding: const EdgeInsets.all(18.0),
          title: Text(title),
          content: content,
          actions: [
            TextButton(
              onPressed: Navigator.of(context).pop,
              child: const Text('CANCEL'),
            ),
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
                setState(() => _mainColor = _tempMainColor);
                setState(() => _shadeColor = _tempShadeColor);
              },
              child: const Text('SUBMIT'),
            ),
          ],
        );
      },
    );
  }

  void _openColorPicker() async {
    _openDialog(
      "Color picker",
      MaterialColorPicker(
        selectedColor: _shadeColor,
        onColorChange: (color) => setState(() => _tempShadeColor = color),
        onMainColorChange: (color) => setState(() => _tempMainColor = color),
        onBack: () => print("Back button pressed"),
      ),
    );
  }

  void _openMainColorPicker() async {
    _openDialog(
      "Main Color picker",
      MaterialColorPicker(
        selectedColor: _mainColor,
        allowShades: false,
        onMainColorChange: (color) => setState(() => _tempMainColor = color),
      ),
    );
  }

  void _openAccentColorPicker() async {
    _openDialog(
      "Accent Color picker",
      MaterialColorPicker(
        colors: accentColors,
        selectedColor: _mainColor,
        onMainColorChange: (color) => setState(() => _tempMainColor = color),
        circleSize: 40.0,
        spacing: 10,
      ),
    );
  }

  void _openFullMaterialColorPicker() async {
    _openDialog(
      "Full Material Color picker",
      MaterialColorPicker(
        colors: fullMaterialColors,
        selectedColor: _mainColor,
        onMainColorChange: (color) => setState(() => _tempMainColor = color),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Material color picker",
                style: Theme.of(context).textTheme.headlineSmall,
              ),
              const SizedBox(height: 62.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CircleAvatar(
                    backgroundColor: _mainColor,
                    radius: 35.0,
                    child: const Text("MAIN"),
                  ),
                  const SizedBox(width: 16.0),
                  CircleAvatar(
                    backgroundColor: _shadeColor,
                    radius: 35.0,
                    child: const Text("SHADE"),
                  ),
                ],
              ),
              const SizedBox(height: 32.0),
              OutlinedButton(
                onPressed: _openColorPicker,
                child: const Text('Show color picker'),
              ),
              const SizedBox(height: 16.0),
              OutlinedButton(
                onPressed: _openMainColorPicker,
                child: const Text('Show main color picker'),
              ),
              const Text('(only main color)'),
              const SizedBox(height: 16.0),
              OutlinedButton(
                onPressed: _openAccentColorPicker,
                child: const Text('Show accent color picker'),
              ),
              const SizedBox(height: 16.0),
              OutlinedButton(
                onPressed: _openFullMaterialColorPicker,
                child: const Text('Show full material color picker'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

通过以上内容，你应该能够理解并使用 flutter_material_color_picker 插件来实现颜色选择功能。希望这对你有所帮助！