flutter pub add flutter_picker基于插件公开信息、社区数据与项目使用情况整理的选型参考。
Flutter Picker 是一个功能强大的 Flutter 插件，提供多种选择器组件，包括 NumberPicker、DateTimePicker、ArrayPicker 和默认的联动选择器。它提供了灵活的配置选项，可自定义外观和行为，适用于各种表单输入和选择工作流程。设计上易于集成，支持动态数据绑定和在不同用例中的流畅用户交互。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
Flutter plugin picker. Include NumberPicker, DateTimePicker, ArrayPicker, and default linkage Picker. Provide flexible parameters to meet various needs. At the same time, you can extend more functions through custom adapters.
Supported Platforms
- Android
- IOS
- Windows
- MacOS
- Linux
- Web
# add this line to your dependencies
flutter_picker:
git:
url: https://github.com/yangyxd/flutter_picker.git
import 'package:flutter_picker/flutter_picker.dart';
showPicker(BuildContext context) {
Picker picker = new Picker(
adapter: PickerDataAdapter<String>(pickerdata: new JsonDecoder().convert(PickerData)),
changeToFirst: true,
textAlign: TextAlign.left,
columnPadding: const EdgeInsets.all(8.0),
onConfirm: (Picker picker, List value) {
print(value.toString());
print(picker.getSelectedValues());
}
);
picker.show(_scaffoldKey.currentState);
}
showPickerModal(BuildContext context) {
new Picker(
adapter: PickerDataAdapter<String>(pickerdata: new JsonDecoder().convert(PickerData)),
changeToFirst: true,
hideHeader: false,
onConfirm: (Picker picker, List value) {
print(value.toString());
print(picker.adapter.text);
}
).showModal(this.context); //_scaffoldKey.currentState);
}
showPickerIcons(BuildContext context) {
new Picker(
adapter: PickerDataAdapter(data: [
new PickerItem(text: Icon(Icons.add), value: Icons.add, children: [
new PickerItem(text: Icon(Icons.more)),
new PickerItem(text: Icon(Icons.aspect_ratio)),
new PickerItem(text: Icon(Icons.android)),
new PickerItem(text: Icon(Icons.menu)),
]),
new PickerItem(text: Icon(Icons.title), value: Icons.title, children: [
new PickerItem(text: Icon(Icons.more_vert)),
new PickerItem(text: Icon(Icons.ac_unit)),
new PickerItem(text: Icon(Icons.access_alarm)),
new PickerItem(text: Icon(Icons.account_balance)),
]),
new PickerItem(text: Icon(Icons.face), value: Icons.face, children: [
new PickerItem(text: Icon(Icons.add_circle_outline)),
new PickerItem(text: Icon(Icons.add_a_photo)),
new PickerItem(text: Icon(Icons.access_time)),
new PickerItem(text: Icon(Icons.adjust)),
]),
new PickerItem(text: Icon(Icons.linear_scale), value: Icons.linear_scale, children: [
new PickerItem(text: Icon(Icons.assistant_photo)),
new PickerItem(text: Icon(Icons.account_balance)),
new PickerItem(text: Icon(Icons.airline_seat_legroom_extra)),
new PickerItem(text: Icon(Icons.airport_shuttle)),
new PickerItem(text: Icon(Icons.settings_bluetooth)),
]),
new PickerItem(text: Icon(Icons.close), value: Icons.close),
]),
title: new Text("Select Icon"),
onConfirm: (Picker picker, List value) {
print(value.toString());
print(picker.getSelectedValues());
}
).show(_scaffoldKey.currentState);
}
showPickerDialog(BuildContext context) {
new Picker(
adapter: PickerDataAdapter<String>(pickerdata: new JsonDecoder().convert(PickerData)),
hideHeader: true,
title: new Text("Select Data"),
onConfirm: (Picker picker, List value) {
print(value.toString());
print(picker.getSelectedValues());
}
).showDialog(context);
}
showPickerArray(BuildContext context) {
new Picker(
adapter: PickerDataAdapter<String>(pickerdata: new JsonDecoder().convert(PickerData2), isArray: true),
hideHeader: true,
title: new Text("Please Select"),
onConfirm: (Picker picker, List value) {
print(value.toString());
print(picker.getSelectedValues());
}
).showDialog(context);
}
showPickerNumber(BuildContext context) {
new Picker(
adapter: NumberPickerAdapter(data: [
NumberPickerColumn(begin: 0, end: 999),
NumberPickerColumn(begin: 100, end: 200),
]),
delimiter: [
PickerDelimiter(child: Container(
width: 30.0,
alignment: Alignment.center,
child: Icon(Icons.more_vert),
))
],
hideHeader: true,
title: new Text("Please Select"),
onConfirm: (Picker picker, List value) {
print(value.toString());
print(picker.getSelectedValues());
}
).showDialog(context);
}
const PickerData2 = '''
[
[
1,
2,
3,
4
],
[
11,
22,
33,
44
],
[
"aaa",
"bbb",
"ccc"
]
]
''';
const PickerData = '''
[
{
"a": [
{
"a1": [
1,
2,
3,
4
]
},
{
"a2": [
5,
6,
7,
8
]
},
{
"a3": [
9,
10,
11,
12
]
}
]
},
{
"b": [
{
"b1": [
11,
22,
33,
44
]
},
{
"b2": [
55,
66,
77,
88
]
},
{
"b3": [
99,
1010,
1111,
1212
]
}
]
},
{
"c": [
{
"c1": [
"a",
"b",
"c"
]
},
{
"c2": [
"aa",
"bb",
"cc"
]
},
{
"c3": [
"aaa",
"bbb",
"ccc"
]
}
]
}
]
''';
Flutter Picker插件已经更新以支持最新版本的Flutter。主要更新内容如下：
兼容性升级：
API更新：
ScaffoldState.showBottomSheet方法为Scaffold.maybeOfButtonStyle和颜色相关的API，使用colorScheme.primary替代过时的colorScheme.secondary使用说明：
The Flutter Picker plugin has been updated to support the latest versions of Flutter. Major updates include:
Compatibility Upgrade:
API Updates:
ScaffoldState.showBottomSheet method with Scaffold.maybeOfButtonStyle and color-related APIs, using colorScheme.primary instead of the deprecated colorScheme.secondaryUsage Notes: