在前面的三篇文章中，我们学习了如何选择日期,时间和单选项，本文继续介绍一个常用的选择部件：选择颜色。
启动 Android Studio，打开 hello_world 项目，运行虚拟机，这样就可以实时看到编码产生的效果。现在，我们的部件页面展示了文本框，日期选择，时间选择，重要性选择，以及按钮四个部件。
添加颜色选择依赖包
- 在项目的根文件夹下，找到并打开
pubspec.yaml文件，定位到下列代码：
intl: ^0.18.1
- 在这一行代码的下面，添加如下代码：
flutter_colorpicker: ^1.0.3
注意：代码缩进要与 intl: ^0.18.1 保持相同。
- 点击文件上方的
Pub get按钮，下载依赖软件包。
- 控制台输出如下，表示依赖包添加成功。
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文件，定位到下列代码：
import 'package:intl/intl.dart';
- 在这一行代码的上方，添加下列代码：
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
- 继续在
my_widgets.dart文件中，定位到下列代码：
Importance _importance = Importance.low;
- 在这一行代码的下方，添加下列代码：
Color _currentColor = Colors.green;
这里，我们定义了一个变量，保存用户选择的颜色，默认颜色为绿色。
- 继续在
my_widgets.dart文件中，定位到下列代码：
Widget buildImportanceField() {
- 在这一行代码的上方，添加下列代码：
// 选择颜色
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文件中，定位到下列代码：
buildMaterialButton(),
- 在这一行代码的上方，添加下列代码：
buildColorPicker(context),
- 保存文件，热重启项目。点击
部件导航图标，页面上出现了时间颜色的选择部件，默认显示绿色。
- 点击
颜色的选择按钮，弹出颜色选择对话框，选择一个喜欢的颜色：
注意：页面上的颜色条已经从绿色变成了我们选择的颜色。
- 点击
保存按钮，确认我们选择的颜色，自动关闭对话框：
提交代码
我们已经实现了颜色的选择，又到达了一个小小的里程碑，应该对代码进行提交，保持良好编程习惯。
git add .
git commit -m '选择并显示颜色。'
