flutter_pickers

Description:

flutter pickers

flutter_pickers #

flutter 选择器库，包括日期及时间选择器（可设置范围）、单项选择器（可用于性别、民族、学历、星座、年龄、身高、体重、温度等）、城市地址选择器（分省级、地级及县级）、多项选择器等…… 欢迎Fork & pr贡献您的代码，大家共同学习
Example #
Web版在线Demo

flutter.eeaarr.cn (上面进不去 试试这个)




用法 #
1.Depend
dependencies:
flutter_pickers: ^2.1.9
copied to clipboard
2.Get
$ flutter packages get
copied to clipboard
3.Install
import 'package:flutter_pickers/pickers.dart';
copied to clipboard
目录 #

flutter_pickers

地址选择器

简单使用
更多用法
更多方法


单项选择器

简单使用
内置数据


多项选择器（无联动）
多项选择器（联动）
时间选择器

简单使用
更多方法
参数说明
tip


样式

内置样式
自定义样式


其他参数

overlapTabBar





地址选择器 #

Pickers.showAddressPicker()


区域数据来源
请戳我查看demo代码


支持三级联动
支持自定义颜色、大小等样式
支持显示 '全部' 选项
支持只选择 省市 2级
支持查询城市码
实时回调










三级选择器动图
二级静态图



简单使用 #
String initProvince = '四川省', initCity = '成都市', initTown = '双流区';
Widget _checkLocation() {
return InkWell(
onTap: () {
Pickers.showAddressPicker(
context,
initProvince: initProvince,
initCity: initCity,
initTown: initTown,
onConfirm: (p, c, t) {
setState(() {
initProvince = p;
initCity = c;
initTown = t;
});
},
);
},
child: Text('$initProvince - $initCity - $initTown'));
}
copied to clipboard

initTown : 不设置或者设置为null ，不显示区级

更多用法 #

demo address_picker_page.dart

AddressPicker.showPicker(
context,
initProvince: locations2[0],
initCity: locations2[1],
initTown: locations2[2],
showTitlebar: true,
menu: _headMenuView,
menuHeight: 36.0,
title: title,
cancelWidget: _cancelButton,
commitWidget: _commitButton,
headDecoration: headDecoration,
addAllItem: false,
textColor: Colors.white,
backgroundColor: Colors.grey[800],
onConfirm: (p, c, t) {},
);
copied to clipboard





参数
描述
默认




initProvince
初始化 省
''


initCity
初始化 市
''


initTown
初始化 区
''


pickerStyle
详见样式
DefaultPickerStyle()


onChanged
选择器发生变动 return (String province, String city, String town)
null


onConfirm
选择器提交 return (String province, String city, String town)
null


onCancel
选择器取消 return (bool isCancel) 是否通过点击取消按钮关闭
null


addAllItem
市、区是否添加 '全部' 选项
true



更多方法 #
/// 根据城市名 查询城市code(有先后顺序)
List<String> cityCode = Address.getCityCodeByName(provinceName:'四川省', cityName: '成都市', townName: '武侯区');
return [510000,510100,510104] or [510000,510000] or [510000] or []


/// 通过城市code 查询城市名(有先后顺序)
List<String> cityName = Address.getCityNameByCode(provinceCode: "510000", cityCode: "510100", townCode: "510104");
return [四川省, 成都市, 锦江区] or [四川省, 成都市] or [四川省] or []
copied to clipboard
单项选择器 #

Pickers.showSinglePicker()请戳我查看demo代码


单选和多选支持数据源混传 num string



简单使用. #
String initData = 'PHP';
Widget _demo() {
return InkWell(
onTap: () {
Pickers.showSinglePicker(context,
data: ['PHP', 'JAVA', 'C++', 'Dart', 'Python', 'Go'],
selectData: initData,
onConfirm: (p, position) {
setState(() {
initData = p;
});
}, onChanged: (p) => print('数据发生改变：$p'));
},
child: Text('$initData'));
}
copied to clipboard



参数
描述
默认




data
数据源
null


selectData
选中的数据
''


pickerStyle
详见样式
DefaultPickerStyle()


onChanged
选择器发生变动 return (String data，int position)
null


onConfirm
选择器提交 return (String data，int position)
null


onCancel
选择器取消 return (bool isCancel) 是否通过点击取消按钮关闭
null



内置数据 #

可直接传给 data:PickerDataType.sex


sex // 性别
education // 学历
subject // 学科
constellation // 星座
zodiac // 生肖
ethnicity // 民族

多项选择器（无联动） #

Pickers.showMultiPicker() 请戳我查看demo代码



示例代码 #
final timeData = [
['上午', '下午'],
List.generate(12, (index) => (index + 1).toString()).toList(),
List.generate(60, (index) => index.toString()).toList(),
List.generate(60, (index) => index.toString()).toList(),
];

void _showDemo(){
Pickers.showMultiPicker(
context,
data: timeData,
selectData: timeData2Select,
suffix: ['', '时', '分', '秒'],
onConfirm: (p) {
print('longer >>> 返回数据类型：${p.map((x) => x.runtimeType).toList()}');
},
);
}
copied to clipboard



参数
描述
默认




data
数据源
null


selectData
选中的数据
''


suffix
item后缀
null


pickerStyle
详见样式
DefaultPickerStyle()


onChanged
选择器发生变动 return (List data, List
null


onConfirm
选择器提交 return (List data, List
null


onCancel
选择器取消 return (bool isCancel) 是否通过点击取消按钮关闭
null




多项选择器（联动） #

Pickers.showMultiLinkPicker() 请戳我查看demo代码

示例代码 #
void _showPicker() {
var multiData = {
'a': {
'aa': [1, 'ww'],
'aaa': 10086
},
'b': ['bbb', 'bbbbb'],
'c': {
'cc': {
'ccc333': [111, 1111],
'cccc33': {
'ccccc4': '帮忙star',
'ccc4-2': [4442, 44442, 442]
},
},
'cc2': ['ccc', 123],
'cc3': 'star 鼓励'
}
};

Pickers.showMultiLinkPicker(
context,
data: multiData,
// 注意数据类型要对应 比如 44442 写成字符串类型'44442'，则找不到
// selectData: ['c', 'cc', 'cccc33', 'ccc4-2', 44442],
selectData: ['c', 'cc3'],
columeNum: 5,
suffix: ['', '', '', '', ''],
onConfirm: (List p) {
print('longer >>> 返回数据：${p.join('、')}');
print('longer >>> 返回数据类型：${p.map((x) => x.runtimeType).toList()}');
},
);
}
copied to clipboard



参数
描述
默认




columeNum
选择器列数（必填）
null


data
数据源
null





和上面的多项选择器（无联动）差不多，就不多介绍，改动了2个字段
最外层必须是map（既然是多项，你至少得2列吧）
map类型 说明还有下一列，如果是list或者string、num 表示已经达到最后一级

时间选择器 #

Pickers.showDatePicker() 请戳我查看demo代码


16种模式「年月日时分秒」
自定义后缀
最大|最小 时间
自定义显示样式





简单使用.. #
Widget demo() {
return FlatButton(
onPressed: () {
Pickers.showDatePicker(
context,
onConfirm: (p) {
print('longer >>> 返回数据：$p');
},
// onChanged: (p) => print(p),
);
},
child: Text('Demo'));
}
copied to clipboard
更多方法. #
Pickers.showDatePicker(
context,
// 模式，详见下方
mode: DateMode.HMS,
// 后缀 默认Suffix.normal()，为空的话Suffix()
suffix: Suffix(hours: ' 小时', minutes: ' 分钟', seconds: ' 秒'),
// 样式 详见下方样式
pickerStyle: pickerStyle,
// 默认选中
selectDate: PDuration(hour: 18, minute: 36, second: 36),
minDate: PDuration(hour: 12, minute: 38, second: 3),
maxDate: PDuration(hour: 12, minute: 40, second: 36),
onConfirm: (p) {
print('longer >>> 返回数据：$p');
},
// onChanged: (p) => print(p),
);
copied to clipboard



参数
描述
默认




mode
时间选择器所显示样式 16 种时间样式
DateMode.YMD


selectData
PDuration()初始化选中时间
默认现在：PDuration.now()


minDate
PDuration()最小时间
PDuration(year: 1900)


maxDate
PDuration()最大时间
PDuration(year: 2100)


suffix
每列时间对应的单位
Suffix.normal()


pickerStyle
详见样式
DefaultPickerStyle()


onChanged
选择器发生变动 return (PDuration data)
null


onConfirm
选择器提交 return (PDuration data)
null


onCancel
选择器取消 return (bool isCancel) 是否通过点击取消按钮关闭
null



参数说明 #

PDuration()


selectDate，minDate，maxDate 和返回的数据类型 都是PDuration()

// 可以自定义设置年月日时分秒
PDuration(year: 2020, month: 1, day: 4, hour: 12, minute: 40, second: 36);
// 设置DateTime类型
PDuration.parse(DateTime.parse('20210139'));
PDuration.now();
copied to clipboard

DateMode
时间选择器所显示样式

/// 时间选择器 所显示样式
enum DateMode {
/// 【yyyy-MM-dd HH:mm:ss】年月日时分秒
YMDHMS,
/// 【yyyy-MM-dd HH:mm】年月日时分
YMDHM,
/// 【yyyy-MM-dd HH】年月日时
YMDH,
/// 【yyyy-MM-dd】年月日
YMD,
/// 【yyyy-MM】年月
YM,
/// 【yyyy】年
Y,
/// 【MM-dd HH:mm:ss】月日时分秒
MDHMS,
/// 【MM-dd HH:mm】月日时分
MDHM,
/// 【MM-dd HH:mm】月日时
MDH,
/// 【MM-dd】月日
MD,
/// 【HH:mm:ss】时分秒
HMS,
/// 【HH:mm】时分
HM,
/// 【mm:ss】分秒
MS,
/// 【ss】秒
S,
/// 【MM】月
M,
/// 【HH】时
H
}
copied to clipboard
tip #

如果用到了日期，selectData需要传入年，不然无法计算，如果没有，会默认当前年
当只有单列数据，min|max限制不产生关联 只针对单列item限制，比如 maxDate: day=3, minDate: day=10, 那么day只显示3-10之间
如果minDate:year: 2020, month: 2, day: 10, 只显示2020年2月10日之后的
minDate|maxDate 的YMD和HMS 没有关联！ 没有关联！比如设置maxDate:year: 2020, month: 2, day: 10, hour:8，不是2020年2月10日8时之后的时间

样式 #
内置样式 #

style_picker_page.dart 请戳我查看demo代码
default_style.dart 源码


以下4种样式是使用 PickerStyle 类进行封装的。
都内置了夜间模式，如 NoTitleStyle.dark()
除了NoTitleStyle, 其它的样式可以传入

haveRadius： 是否圆角
title： 标题
color： 确定按钮颜色












默认样式：DefaultPickerStyle()
默认样式(暗色)：DefaultPickerStyle.dark()










无标题样式：NoTitleStyle()
无标题样式(暗色)：NoTitleStyle.dark()










关闭按钮样式：ClosePickerStyle()
关闭按钮样式(暗色)：ClosePickerStyle.dark()










圆角按钮样式：RaisedPickerStyle()
圆角按钮样式(暗色)：RaisedPickerStyle.dark()



自定义样式 #

style_picker_page.dart 请戳我查看demo代码
picker_style.dart 样式基类



/// [showTitleBar] 是否显示头部（选择器以上的控件） 默认：true
/// [menu] 头部和选择器之间的菜单widget，默认null 不显示
/// [title] 头部 中间的标题 默认SizedBox() 不显示
/// [pickerHeight] 选择器下面 picker 的整体高度 固定高度：220.0
/// [pickerTitleHeight] 选择器上面 title 确认、取消的整体高度 固定高度：44.0
/// [pickerItemHeight] 选择器每个被选中item的高度：40.0
/// [menuHeight] 头部和选择器之间的菜单高度 固定高度：36.0
/// [cancelButton] 头部的取消按钮
/// [commitButton] 头部的确认按钮
/// [textColor] 选择器的文字颜色 默认黑色
/// [textSize] 选择器的文字大小
/// [backgroundColor] 选择器的背景颜色 默认白色
/// [headDecoration] 头部Container 的Decoration 默认：BoxDecoration(color: Colors.white)
/// [itemOverlay] item的覆盖组件，可以自定义选中样式 [双横线样式可参考](https://github.com/longer96/flutter_pickers/issues/12)

class PickerStyle {}
copied to clipboard
其他参数 #
overlapTabBar #

License #
flutter_pickers 使用 MIT 许可证，详情见 LICENSE 文件。