Flutter – 拾色器应用

如果应用程序涉及颜色选择系统，我们可以使用Flutter_colorpicker库在Flutter中轻松完成。它易于定制，从而节省时间并增强用户体验。在本文中，我们将使用flutter_colorpicker库创建颜色选择器。跟随以更好地理解。

安装包：

要使用这个库，我们首先需要将它添加到pubspec.yaml文件中。选择以下任一方法将其添加到文件中。

在工作 IDE 的终端中键入以下命令：

flutter pub add flutter_colorpicker

或者只是将其添加到依赖项部分下。然后运行 pub get。

导入包：

在此之后，我们需要通过以下方式导入库：

Dart

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

执行：

我们创建了一个颜色变量 currentColor 和 List currentColors。我们还创建了两个函数：

1. changeColor(Color) – 以颜色为参数。
2. changeColors(List) – 将颜色列表作为参数。

当调用changeColor ()函数时， currentColor的值被改变，当调用changeColors时，列表currentColors被改变。

块选择器：

BlockPicker() 小部件需要两个功能——pickerColor (Color) 和onColorChanged (函数)。我们可以自定义它，但在这里我们只使用这两个属性创建一个简单的颜色选择器。由于我们已将appBar背景颜色设置为 currentColor，因此每当我们使用BlockPicker () 小部件选择任何颜色时， pickerColor值都会分配给appBar背景颜色。

Dart

class _MyAppState extends State {
  Color currentColor = Colors.amber;
  List currentColors = [Colors.yellow, Colors.green];
  
  void changeColor(Color color) => setState(() => currentColor = color);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: const Text('GeeksForGeeks'),
            backgroundColor: currentColor,
            centerTitle: true,
          ),
          body: Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Expanded(
              child:  BlockPicker(
                      pickerColor: currentColor, onColorChanged: changeColor),
                 ),
          ),
        ));
  }
}

输出：

如果我们想改变它的结构，我们也可以改变颜色选择器的布局。例如，在下面的代码中，我们使用 ListView.builder() 在列表结构中显示颜色。

Dart

BlockPicker(
            pickerColor: currentColor,
            onColorChanged: changeColor,
            layoutBuilder: (context, colors, child) {
              return ListView.builder(
                  itemCount: colors.length,
                  itemBuilder: (context, idx) {
                    return GestureDetector(
                      onTap: () {
                        changeColor(colors[idx]);
                      },
                      child: Container(
                          height: 30, width: 10, color: colors[idx]),
                    );
                  });
            },
          ),

输出：

材料选择器：

MaterialPicker () 小部件还需要两个属性——pickerColor (Color) 和onColorChanged (函数)。函数changeColor和changeColors保持不变。

Dart

class _MyAppState extends State {
  Color currentColor = Colors.amber;
  List currentColors = [Colors.yellow, Colors.green];
  
  void changeColor(Color color) => setState(() => currentColor = color);
    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: const Text('GeeksForGeeks'),
            backgroundColor: currentColor,
            centerTitle: true,
          ),
          body: Container(
            height: 600,
            child: Expanded(
              child: MaterialPicker(
                      pickerColor: currentColor, onColorChanged: changeColor)
               ),
          ),
        ));
  }
}

输出：

多重选择块选择器：

如果我们想一次选择多种颜色，可以使用MultipleChoiceBlockPicker () 小部件来完成。

Dart

MultipleChoiceBlockPicker(
                pickerColors: currentColors,
                onColorsChanged: changeColors
              ),

输出：

完整源代码：

Dart

import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
  
void main() => runApp(const MaterialApp(home: MyApp()));
  
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  State createState() => _MyAppState();
}
  
class _MyAppState extends State {
  Color currentColor = Colors.green;
  List currentColors = [Colors.yellow, Colors.red];
  
  void changeColor(Color color) => setState(() => currentColor = color);
  void changeColors(List colors) =>
      setState(() => currentColors = colors);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: const Text('GeeksForGeeks'),
            backgroundColor: currentColor,
            centerTitle: true,
          ),
          body: SingleChildScrollView(
            child: Container(
              height: 1000,
              child: Column(
                children: [
                  Text("Block Picker"),
                  Expanded(
                    child: BlockPicker(
                        pickerColor: currentColor, onColorChanged: changeColor),
                  ),
                  SizedBox(height: 10),
                  Text("Material Picker"),
                  Expanded(
                    child: MaterialPicker(
                        pickerColor: currentColor, onColorChanged: changeColor),
                  ),
                  SizedBox(height: 10),
                  Text("MaterialChoiceBlockPicker"),
                  Expanded(
                    child: MultipleChoiceBlockPicker(
                      pickerColors: currentColors,
                      onColorsChanged: changeColors,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ));
  }
}

输出：