Flutter 3 基础14: 选择颜色

在前面的三篇文章中，我们学习了如何选择日期,时间和单选项，本文继续介绍一个常用的选择部件：选择颜色。

启动 Android Studio，打开 hello_world 项目，运行虚拟机，这样就可以实时看到编码产生的效果。现在，我们的部件页面展示了文本框，日期选择，时间选择，重要性选择，以及按钮四个部件。

添加颜色选择依赖包

在项目的根文件夹下，找到并打开 pubspec.yaml 文件，定位到下列代码：

yaml 复制代码

intl: ^0.18.1

在这一行代码的下面，添加如下代码：

dart 复制代码

flutter_colorpicker: ^1.0.3

注意：代码缩进要与 intl: ^0.18.1 保持相同。

点击文件上方的 Pub get 按钮，下载依赖软件包。

控制台输出如下，表示依赖包添加成功。

console 复制代码

    Resolving dependencies...
      collection 1.17.2 (1.18.0 available)
    + flutter_colorpicker 1.0.3
      flutter_lints 2.0.3 (3.0.0 available)
      lints 2.1.1 (3.0.0 available)
      material_color_utilities 0.5.0 (0.8.0 available)
      meta 1.9.1 (1.11.0 available)
      stack_trace 1.11.0 (1.11.1 available)
      stream_channel 2.1.1 (2.1.2 available)
      test_api 0.6.0 (0.6.1 available)
      web 0.1.4-beta (0.3.0 available)
    Changed 1 dependency!
    Process finished with exit code 0

这里，+ flutter_colorpicker 1.0.3 表示新添加的颜色选择依赖包。

添加颜色选择部件

在 lib/widget 文件夹下，打开 my_widgets.dart 文件，定位到下列代码：

dart 复制代码

import 'package:intl/intl.dart';

在这一行代码的上方，添加下列代码：

dart 复制代码

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

继续在 my_widgets.dart 文件中，定位到下列代码：

dart 复制代码

Importance _importance = Importance.low;

在这一行代码的下方，添加下列代码：

dart 复制代码

Color _currentColor = Colors.green;

这里，我们定义了一个变量，保存用户选择的颜色，默认颜色为绿色。

继续在 my_widgets.dart 文件中，定位到下列代码：

dart 复制代码

Widget buildImportanceField() {

在这一行代码的上方，添加下列代码：

dart 复制代码

// 选择颜色
Widget buildColorPicker(BuildContext context) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        children: [
          Container(
            height: 50.0,
            width: 10.0,
            color: _currentColor,
          ),
          const SizedBox(width: 8.0),
          const Text(
            '颜色',
            style: TextStyle(fontSize: 20.0),
          ),
        ],
      ),
      TextButton(
        child: const Text(
          '选择',
          style: TextStyle(fontSize: 20.0),),
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                content: BlockPicker(
                  pickerColor: Colors.white,
                  onColorChanged: (color) {
                    setState(() => _currentColor = color);
                  },
                ),
                actions: [
                  TextButton(
                    child: const Text(
                      '保存',
                      style: TextStyle(fontSize: 20.0),),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              );
            },
          );
        },
      ),
    ],
  );
}

继续在 my_widgets.dart 文件中，定位到下列代码：

dart 复制代码

buildMaterialButton(),

在这一行代码的上方，添加下列代码：

dart 复制代码

buildColorPicker(context),

保存文件，热重启项目。点击部件导航图标，页面上出现了时间颜色的选择部件，默认显示绿色。

点击 颜色 的 选择 按钮，弹出颜色选择对话框，选择一个喜欢的颜色：

注意：页面上的颜色条已经从绿色变成了我们选择的颜色。

点击 保存 按钮，确认我们选择的颜色，自动关闭对话框：

提交代码

我们已经实现了颜色的选择，又到达了一个小小的里程碑，应该对代码进行提交，保持良好编程习惯。

shell 复制代码

git add .
git commit -m '选择并显示颜色。'