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

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

Pick_Color简介

Pick_Color 插件允许您从图片中采样特定的颜色，并通过在图片区域上拖动来获取其十六进制颜色代码。

添加依赖

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

dependencies:
  pick_color: any

使用方法

以下是一个完整的示例代码，展示了如何使用 pick_color 插件来实现颜色选择功能：

import 'package:flutter/material.dart';
import 'package:pick_color/pick_color.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',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ImagePickerScreen(),
    );
  }
}

class ImagePickerScreen extends StatefulWidget {
  [@override](/user/override)
  _ImagePickerScreenState createState() => _ImagePickerScreenState();
}

class _ImagePickerScreenState extends State<ImagePickerScreen> {
  // 加载图片
  Image image = Image.asset(
    "assets/c.jpg", // 替换为您自己的图片路径
    height: 300,
  );

  // 存储选中的颜色和响应
  Color? color;
  PickerResponse? userResponse;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            // 颜色选择器
            ColorPicker(
              child: image, // 您的图片小部件
              showMarker: true, // 显示标记
              onChanged: (response) {
                setState(() {
                  userResponse = response; // 保存响应
                  this.color = response.selectionColor; // 保存选中的颜色
                });
              },
            ),
            const SizedBox(height: 20),

            // 显示选中的颜色
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  const Text(
                    "选中的颜色  :-",
                    style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(width: 10),
                  Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      color: userResponse?.selectionColor ?? Colors.red, // 显示选中的颜色
                      border: Border.all(color: Colors.black, width: 1), // 边框
                      borderRadius: BorderRadius.circular(20), // 圆角
                    ),
                  )
                ],
              ),
            ),
            const SizedBox(height: 20),

            // 显示十六进制颜色代码
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Text(
                    "十六进制代码  :- ${userResponse?.hexCode ?? ""}",
                    style: const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),

            // 显示红色通道值
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Text(
                    "红色  :- ${userResponse?.redScale ?? ""}",
                    style: const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),

            // 显示绿色通道值
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Text(
                    "绿色  :- ${userResponse?.greenScale ?? ""}",
                    style: const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),

            // 显示蓝色通道值
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Text(
                    "蓝色  :- ${userResponse?.blueScale ?? ""}",
                    style: const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}