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 '选择并显示颜色。'
相关推荐
aningxiaoxixi38 分钟前
Android 之 audiotrack
android
枷锁—sha40 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
mascon1 小时前
U3D打包IOS的自我总结
ios
名字不要太长 像我这样就好1 小时前
【iOS】继承链
macos·ios·cocoa
karshey2 小时前
【IOS webview】IOS13不支持svelte 样式嵌套
ios
潜龙95272 小时前
第4.3节 iOS App生成追溯关系
macos·ios·cocoa
Cao_Shixin攻城狮4 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
idjl9 小时前
Mysql测试题
android·adb
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview