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

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

简单且快速的两步颜色选择器，支持阴影和颜色自定义。

实现

访问 pub.dev -> 安装 和 pub.dev -> 示例。

如果你不知道如何展示颜色选择器，可以使用 o_popup。两个包的组合示例可以在 example/demo.dart 中找到。

商业用途

如果你在商业项目中使用此代码，请通过 GitHub Sponsors 捐赠给我。我也会为使用的包捐款，因为这确保了我们所有人的稳定开发！

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o_color_picker demo app',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color? selectedColor = Colors.lightGreen[300]; // 初始颜色设置为浅绿色

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (var states) => selectedColor!, // 设置按钮背景色为选中的颜色
                ),
              ),
              child: Text(
                'Change the color of the button',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
              onPressed: () => showDialog<void>(
                context: context,
                builder: (_) => Material(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      OColorPicker(
                        selectedColor: selectedColor, // 当前选中的颜色
                        colors: primaryColorsPalette, // 颜色调色板
                        onColorChange: (color) {
                          setState(() {
                            selectedColor = color; // 更新选中的颜色
                          });
                          Navigator.of(context).pop(); // 关闭对话框
                        },
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个文本按钮。点击按钮时会弹出一个颜色选择器，用户可以选择颜色并更新按钮的背景色。


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

1 回复

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


quick_color_picker 是一个简单的 Flutter 插件，用于在应用程序中快速选择颜色。它提供了一个简单的用户界面，允许用户从预定义的颜色列表中选择颜色，或者通过自定义颜色选择器选择颜色。

安装

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

dependencies:
  flutter:
    sdk: flutter
  quick_color_picker: ^1.0.0

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

使用

以下是一个简单的示例，展示了如何使用 quick_color_picker 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ColorPickerDemo(),
    );
  }
}

class ColorPickerDemo extends StatefulWidget {
  @override
  _ColorPickerDemoState createState() => _ColorPickerDemoState();
}

class _ColorPickerDemoState extends State<ColorPickerDemo> {
  Color _selectedColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Quick Color Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            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 QuickColorPicker(
                      onColorChanged: (Color color) {
                        // You can handle the color change here
                      },
                    );
                  },
                );

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

解释

  1. 导入包：首先导入 quick_color_picker 包。

  2. 创建应用程序：创建一个简单的 Flutter 应用程序，并在主页面中使用 ColorPickerDemo。

  3. 颜色选择器：在 ColorPickerDemo 中，我们使用 QuickColorPicker 来显示颜色选择器。用户选择颜色后，我们通过 setState 更新 _selectedColor。

  4. 显示颜色选择器：使用 showDialog 来显示颜色选择器对话框。用户选择颜色后，对话框会返回选择的颜色。

  5. 更新颜色：如果用户选择了颜色，我们通过 setState 更新 _selectedColor，并重新构建 UI 以显示新选择的颜色。

自定义

QuickColorPicker 提供了一些可选的参数，允许你自定义颜色选择器的行为：

  • initialColor: 设置初始选择的颜色。
  • paletteColors: 自定义颜色调色板。
  • onColorChanged: 当颜色发生变化时的回调函数。

示例

QuickColorPicker(
  initialColor: Colors.red,
  paletteColors: [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.yellow,
  ],
  onColorChanged: (Color color) {
    print('Selected color: $color');
  },
)
回到顶部