在前面的三篇文章中,我们学习了如何选择日期,时间和单选项,本文继续介绍一个常用的选择部件:选择颜色。
启动 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 '选择并显示颜色。'