flutter_pickers

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

Example

Web版在线Demo
flutter.eeaarr.cn (上面进不去 试试这个)

用法

1.Depend

dependencies: 
    flutter_pickers: ^2.1.3

2.Get

$ flutter packages get

3.Install

import 'package:flutter_pickers/pickers.dart';

目录

• 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'));
}

• 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) {},
);

参数	描述	默认
initProvince	初始化 省	''
initCity	初始化 市	''
initTown	初始化 区	''
pickerStyle	详见样式	DefaultPickerStyle()
onChanged	选择器发生变动 return (String province, String city, String town)	null
onConfirm	选择器提交 return (String province, String city, String town)	null
addAllItem	市、区是否添加 '全部' 选项	true

更多方法

/// 根据城市名 查询城市code(有先后顺序)
List<String> cityCode =  Address.getCityCodeByName(townName: '四川省', cityName: '成都市', provinceName: '武侯区');
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 []

单项选择器

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'));
}

参数	描述	默认
data	数据源	null
selectData	选中的数据	''
pickerStyle	详见样式	DefaultPickerStyle()
onChanged	选择器发生变动 return (String data，int position)	null
onConfirm	选择器提交 return (String data，int position)	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()}');
      },
    );
  }

参数	描述	默认
data	数据源	null
selectData	选中的数据	''
suffix	item后缀	null
pickerStyle	详见样式	DefaultPickerStyle()
onChanged	选择器发生变动 return (List data, List position)	null
onConfirm	选择器提交 return (List data, List position)	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()}');
      },
    );
  }

参数	描述	默认
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'));
}

更多方法.

    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),
    );

参数	描述	默认
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

参数说明

• 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();

• 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
  }

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]  选择器的文字颜色 默认黑色
/// [backgroundColor]  选择器的背景颜色 默认白色
/// [headDecoration] 头部Container 的Decoration   默认：BoxDecoration(color: Colors.white)

class PickerStyle {}

其他参数

overlapTabBar

License

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