Flutter 3 基础14: 选择颜色

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

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

添加颜色选择依赖包

  1. 在项目的根文件夹下,找到并打开 pubspec.yaml 文件,定位到下列代码:
yaml 复制代码
intl: ^0.18.1
  1. 在这一行代码的下面,添加如下代码:
dart 复制代码
flutter_colorpicker: ^1.0.3

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

  1. 点击文件上方的 Pub get 按钮,下载依赖软件包。
  1. 控制台输出如下,表示依赖包添加成功。
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 表示新添加的颜色选择依赖包。

添加颜色选择部件

  1. lib/widget 文件夹下,打开 my_widgets.dart 文件,定位到下列代码:
dart 复制代码
import 'package:intl/intl.dart';
  1. 在这一行代码的上方,添加下列代码:
dart 复制代码
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
Importance _importance = Importance.low;
  1. 在这一行代码的下方,添加下列代码:
dart 复制代码
Color _currentColor = Colors.green;

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

  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
Widget buildImportanceField() {
  1. 在这一行代码的上方,添加下列代码:
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();
                    },
                  ),
                ],
              );
            },
          );
        },
      ),
    ],
  );
}
  1. 继续在 my_widgets.dart 文件中,定位到下列代码:
dart 复制代码
buildMaterialButton(),
  1. 在这一行代码的上方,添加下列代码:
dart 复制代码
buildColorPicker(context),
  1. 保存文件,热重启项目。点击部件导航图标,页面上出现了时间颜色的选择部件,默认显示绿色
  1. 点击 颜色选择 按钮,弹出颜色选择对话框,选择一个喜欢的颜色:

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

  1. 点击 保存 按钮,确认我们选择的颜色,自动关闭对话框:

提交代码

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

shell 复制代码
git add .
git commit -m '选择并显示颜色。'
相关推荐
雨白5 小时前
Jetpack系列(三):Room数据库——从增删改查到数据库平滑升级
android·android jetpack
花王江不语8 小时前
android studio 配置硬件加速 haxm
android·ide·android studio
江太翁10 小时前
mediapipe流水线分析 三
android·mediapipe
与火星的孩子对话11 小时前
Unity进阶课程【六】Android、ios、Pad 终端设备打包局域网IP调试、USB调试、性能检测、控制台打印日志等、C#
android·unity·ios·c#·ip
tmacfrank12 小时前
Android 网络全栈攻略(四)—— TCPIP 协议族与 HTTPS 协议
android·网络·https
fundroid13 小时前
Kotlin 协程:Channel 与 Flow 深度对比及 Channel 使用指南
android·kotlin·协程
草字13 小时前
cocos 打包安卓
android
DeBuggggggg14 小时前
centos 7.6安装mysql8
android
浩浩测试一下15 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
移动开发者1号16 小时前
深入理解原子类与CAS无锁编程:原理、实战与优化
android·kotlin