Flutter picker plugin

Overview

flutter_picker

pub package GitHub GitHub stars

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

image

How to Use

# add this line to your dependencies
flutter_picker:
  git: git://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);
  }

PickerData Example

Array

const PickerData2 = '''
[
    [
        1,
        2,
        3,
        4
    ],
    [
        11,
        22,
        33,
        44
    ],
    [
        "aaa",
        "bbb",
        "ccc"
    ]
]
    ''';

Linkage

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"
                ]
            }
        ]
    }
]
    ''';
Comments
  • DateTimePickerAdapter is not selecting default datetime

    DateTimePickerAdapter is not selecting default datetime

    DateTimePickerAdapter is not selecting default datetime can you please help me how datetime gets selected.. i used selecteds: [6,4,1,7,2,0] but its not doing anything on arraypicker it works fine but on datetimepicker its not

    opened by rafuns 5
  • No way to show just the picker widget (no modal)

    No way to show just the picker widget (no modal)

    I tried numerous ways from the docs, but none of them allowed me to just show Picker() in the place I needed without any modal/dialog/box. There should be such way and it should be well documented

    opened by dvorapa 5
  • picker doesn't update adapter start/end values in setState

    picker doesn't update adapter start/end values in setState

    I use picker as a widget and i want to update adapter start & end to new value every time the user click on button , but it only keeps the first values it's get, i even try with state to call setState but it still not working . here is my code any help is appreciated

    class _MyHomePageState extends State<MyHomePage> {
      int start = 0;
      int end = 5;
    
      void _updatePicker() {
        setState(() {
          start = 12;
          end = 24;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Picker(
                adapter: NumberPickerAdapter(data: [
                  NumberPickerColumn(begin: start, end: end),
                  NumberPickerColumn(begin: 0, end: 59),
                ]),
                delimiter: null,
                hideHeader: true,
                itemExtent: 32.0,
                height: 120.0,
                textScaleFactor: 1.1,
                columnPadding: EdgeInsets.all(6.0),
                selectedTextStyle: TextStyle(color: Colors.blue, fontSize: 18.0),
                onSelect: (Picker picker, int i, List value) {
                  print(picker.getSelectedValues());
                  List selectedValues = picker.getSelectedValues();
                }).makePicker(ThemeData(
              backgroundColor: Colors.white,
            )),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _updatePicker,
            child: Icon(Icons.access_time),
          ),
        );
      }
    }
    
    opened by fatimahossny 3
  • feature request: maxHour / minHour for DateTimePickerAdapter

    feature request: maxHour / minHour for DateTimePickerAdapter

    Hi your library works great. Thank you.

    However i have a request to limit the hour for datetime adapter picker, So for example, user can only select from 8am to 5pm, instead 24hours.

    Screen Shot 2020-03-24 at 11 12 59

    Thanks

    opened by dexcell 3
  • Add publish on tag push

    Add publish on tag push

    Please add the OAUTH_ACCESS_TOKEN and OAUTH_REFRESH_TOKEN in the secrets on this repo. Ref: https://medium.com/evenbit/publishing-dart-packages-with-github-actions-5240068a2f7d. Enable github actions if you haven't. Once you are ready to publish a new version, simply tag as v1.1.4 etc.

    opened by harsimranmaan 3
  • textStyle是用来控制选项文本样式的吗?好像不起作用

    textStyle是用来控制选项文本样式的吗?好像不起作用

    Picker picker1 = Picker( adapter: PickerDataAdapter(data: goodsList), cancelText: '取消', confirmText: '确定', selecteds: [], height: 280, itemExtent: 38.0, changeToFirst: true, textAlign: TextAlign.left, textStyle: const TextStyle(color: Colors.red, fontSize: 9.0), columnPadding: const EdgeInsets.all(8.0), onConfirm: (Picker picker, List value) async { print(value.toString()); } ); 是我用得不对吗? 现在这个版本的flutter_picker选项字号很大,我想让它能缩小一点,以前版本的挺正常的,不知道是不是我升级了flutter造成的 我尝试设置 textStyle: const TextStyle(color: Colors.red, fontSize: 9.0), 但既不变色,字号也不缩小 微信图片_20191101173631 知道的请指教一二,谢谢

    opened by zhyf08 3
  • Add the ability to jump numbers in NumberPickerColumn

    Add the ability to jump numbers in NumberPickerColumn

    Add a new parameter to the NumberPickerColumn class, called jump, that would skip n numbers. For example:

    • NumberPickerColumn(begin: 100, end: 500) returns 100, 101, 102 ,..., 499, 500.
    • NumberPickerColumn(begin: 100, end: 500, jump: 100) would return 100, 200, 300, 400, 500.
    opened by jesusrp98 3
  • How to pre-select a certain item?

    How to pre-select a certain item?

    Hi,

    I am using this picker with two options in the list (let's call them "A" and "B"). Initially, the default option is "A". When I switch to "B", I would like the picker to "remember" it somehow, so when I open it again, I would like the option "B" to be preselected. Is this possible? Thanks.

    opened by vtomic85 2
  • Continious Scroll triggering onSelect too early

    Continious Scroll triggering onSelect too early

    Thanks for super useful component!

    Let me try to explain my issue. onSelect event is triggered too early in scrolling over multiple values. I would expect it to be triggered only after user has stopped interacting with the scroll wheel. Because if I would do some

    onSelect: (Picker picker, index, List value) {
      setState(() {
               <some assigning>
      });
    }
    

    Then it would refresh the widget and scrolling would be jumping, allowing to scroll only one number at the time. Also juming from 11am to 12pm automatically on the way would be cool addition.

    opened by alarmatwork 2
  • Clear button or the possibility of hide cancel and confirm buttons

    Clear button or the possibility of hide cancel and confirm buttons

    I need to add clear button to dialog picker. If I add custom footer and set cancel: SizedBox(height: 0), confirm: SizedBox(height: 0),

    There is too much empty space at the end of a section. Can we be able to hide the automatically generated buttons for our footer?

    opened by hanyska 2
  • Rest Time Picker initial Value

    Rest Time Picker initial Value

    I am using this libray for custom time picker as shown below Currently it shows with nearest current time. How can we reset it to 00:00 initally rather than picking nearest time?

    Picker(
            adapter: DateTimePickerAdapter(
              type: PickerDateTimeType.kHM,
              minuteInterval: 15,
            ),
            hideHeader: true,
            title: Text("Selecteer Tijd"),
            confirmText: "Selecteren",
            cancelText: "Annuleren",
            onConfirm: (Picker picker, List value) {
              // todo
            });
    
    Screenshot 2021-05-06 at 1 56 30 PM
    opened by thapli9A 2
  • AM/PM are backward for 12:00

    AM/PM are backward for 12:00

    When using AM/PM mode (PickerDateTimeType.kHM_AP), the AM & PM are backwards.

    Selecting 12:00 AM returns 12:00:00.000. It should return 00:00:00.000. Selecting 12:00 PM returns 00:00:00.000. It should return 12:00:00.000.

    This also applies to any minutes within the 12 range.

    Selecting 12:30 AM returns 12:30:00.000. Selecting 12:30 PM returns 00:30:00.000.

    Note: In AM/PM notation AM & PM switch exactly at 12:00. 11:59 = AM, 12:00 = PM

    opened by tkeithblack 1
  • Datetimepicker custom buttons

    Datetimepicker custom buttons

    using datetimepicker only for hours and minutes, how can I use a custom button so it can return data?

    confirm: TextButton( style: ButtonStyle( shape: MaterialStateProperty.all( RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), side: const BorderSide(color: ConstColor.coloreSfondo) ) ), backgroundColor: MaterialStateProperty.all(ConstColor.coloreSfondo), fixedSize: MaterialStateProperty.all(const Size(100, 44)) ), child: Text(AppLocalizations.instance.text("ok"), style: const TextStyle( fontWeight: FontWeight.bold, color: ConstColor.coloreMedium)), onPressed: () { ????????????????? Navigator.of(context).pop(); }, ),

    opened by massimilianochiodi 0
Releases(1.1.0)
Owner
我们有梦想,努力去实现。 We have dreams, and we strive to achieve them.
null
A flutter package for displaying common picker dialogs.

Flutter Material Pickers A flutter package containing commonly used material design picker dialogs. Some are new, some wrap existing or built in picke

CodeGrue 89 Jan 2, 2023
A time picker widget for flutter

time_picker A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Ramon Alex 4 Dec 3, 2022
A Flutter Country Picker Widget with support to country dialing codes

flutter_country_picker A Flutter Country Picker Widget with support to country dialing codes Usage Add the CountryPicker widget in your layout and use

Alessandro Biessek 49 Apr 6, 2022
A beautiful circle color picker for flutter.

A beautiful circle color picker for flutter.

Takeshi Tsukamoto 46 Dec 29, 2022
Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons. Getting Started Head to /p

Vũ Phương 2 Jul 4, 2022
Flutter Color Picker Wheel - an easy to use widget which can be heavily customized

Flutter Color Picker Wheel Flutter Color Picker Wheel is an easy to use widget which can be heavily customized. You can use the WheelColorPicker direc

Kexin Lu 35 Oct 4, 2022
A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

null 6 Jun 7, 2022
An assets picker in WeChat style, support multi assets picking.

An assets picker in WeChat style, support multi assets picking.

FlutterCandies 1.1k Jan 8, 2023
A camera picker in WeChat style.

A camera picker which is an extension for wechat_assets_picker. Based on camera for camera functions and photo_manager for asset implementation.

FlutterCandies 265 Dec 28, 2022
starlight_country_picker is a country picker.

Starlight Country Picker starlight_country_picker is a country picker. Features ☑️ Add New Country ☑️ Search Your Country ⭐ Our package was not used s

Ye Myo Aung 1 Nov 29, 2021
Ejimo - Comprehensive emoji and symbol picker.

Ejimo Find and copy unicode characters, emoticons, glyphs and symbols with Ejimo. Ejimo is a comprehensive emoji and symbol piker that puts every char

null 20 Dec 19, 2022
A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter

flutter_floatwing A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter. Android only Features Pure Flu

Zoe 116 Dec 21, 2022
A flutter plugin which provides Crop Widget for cropping images.

A flutter plugin which provides Crop Widget for cropping images.

Chooyan 97 Jan 5, 2023
A Flutter plugin to use Chrome Custom Tabs.

Flutter Custom Tabs Plugin With the Flutter Custom Tabs Plugin, you can use Custom Tabs as easily as url_launcher. This plugin is built as federated p

Shinya Kumagai 118 Nov 18, 2022
A Flutter plugin that provides a WebView widget

WebView for Flutter A Flutter plugin that provides a WebView widget. On iOS the WebView widget is backed by a WKWebView; On Android the WebView widget

Fitem 2 Jul 29, 2022
Flutter reaction button plugin it is fully customizable widget such as Facebook reaction button

Flutter Reaction Button Flutter button reaction it is fully customizable widget such as Facebook reaction button. Preview Demo Usage Include 'flutter_

Abdelouahed Medjoudja 174 Dec 19, 2022
A Flutter plugin for persisting and dynamically changing the theme.

A Flutter plugin for persisting and dynamically changing the theme.

Flutter Community 66 Sep 29, 2022
A Flutter plugin which makes it straightforward to show the native equivalent of a CupertinoAlertDialog or CupertinoActionSheet dialog

A Flutter plugin which makes it straightforward to show the native equivalent of a CupertinoAlertDialog or CupertinoActionSheet dialog

Christoph Krassnigg 9 Dec 9, 2022
Plugin to the JSON Dynamic Widget to provide named support for Ionicons

json_dynamic_widget_plugin_ionicons Table of Contents Live Example Introduction Using the Plugin Live Example Web Introduction Plugin to the JSON Dyna

null 0 May 14, 2022