Giter Site home page Giter Site logo

flutter_picker's Introduction

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
  • Windows
  • MacOS
  • Linux
  • Web

image

How to Use

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

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"
                ]
            }
        ]
    }
]
    ''';

flutter_picker's People

Contributors

adem68 avatar chandler-cheng avatar edwardaux avatar eugvb avatar harsimranmaan avatar hndrr avatar kvii avatar milkbiscuit avatar qianwu24 avatar rh-id avatar robindijkhof avatar sboutet06 avatar sk1n avatar yangyxd avatar zariweyo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

flutter_picker's Issues

How to set default value for array based picker .

showPickerDialog(BuildContext context , int page) {

new Picker(
adapter: PickerDataAdapter<String>(pickerdata: new JsonDecoder().convert(PickerData) , isArray: true),
hideHeader: true,
onConfirm: (Picker picker, List value) {}

).showDialog(context);
}

how to set default index of column in this picker ?

modal模式下,点击内部界面也会消失

在使用modal的模式下,点击界面内部也会消失,这样产生了歧义,一开始以为点了item选中消失,后来发现不是这个功能,是因为modal模式点击了会自动消失,这个可以优化一下,改成点击内容界面不会消失吗?

Can we fully customize the action bar.(完全自定义工具栏)

美工设计了 上面的cancel部分是 上下切换用的 两个箭头按钮
这部分是否可以做成接受widget组件, 而不仅仅是字符串类型的cancelText属性.
这样会比较容易扩展呢. 谢谢!

image

Can we specify a widget attribute for the cancelText part. String type is not extensible.
For example we'd like to use two arrow buttons to scroll up/down the items(one at a time)

How can we do that now, Thank you.

Xcode 10,iOS 12中build出现错误

Xcode's output:

=== BUILD TARGET Runner OF PROJECT Runner WITH CONFIGURATION Release ===
Building AOT snapshot in release mode (ios-release)...
compiler message: file:///Users/haoyi/.pub-cache/git/flutter_picker-d0aed0785d017a5c601f13ac632a4e06e5d309f5/lib/PickerLocalizationsDelegate.dart:17:3: Error: 'Future' expects 0 type arguments.
compiler message: Future load(Locale locale) {
compiler message: ^
compiler message: file:///Users/haoyi/.pub-cache/git/flutter_picker-d0aed0785d017a5c601f13ac632a4e06e5d309f5/lib/PickerLocalizationsDelegate.dart:17:31: Error: The return type of the method 'PickerLocalizationsDelegate::load' is invalid-type, which does not match the return type of the overridden method (dart.async::Future<#lib1::PickerLocalizations>).
compiler message: Change to a subtype of dart.async::Future<#lib1::PickerLocalizations>.
compiler message: Future load(Locale locale) {
compiler message: ^
compiler message: file:///Users/haoyi/flutter/packages/flutter/lib/src/widgets/localizations.dart:113:13: Error: This is the overriden method ('load').
compiler message: Future load(Locale locale);
compiler message: ^
compiler message: file:///Users/haoyi/.pub-cache/git/flutter_picker-d0aed0785d017a5c601f13ac632a4e06e5d309f5/lib/PickerLocalizationsDelegate.dart:18:12: Error: A value of type '#lib1::SynchronousFuture<#lib2::PickerLocalizations>' can't be assigned to a variable of type 'invalid-type'.
compiler message: Try changing the type of the left hand side, or casting the right hand side to 'invalid-type'.
compiler message: return SynchronousFuture(PickerLocalizations(locale));
compiler message: ^
Compiler terminated unexpectedly.

level 3 view will never show

当pickerItems前几个元素中仅2个level、其余元素有3个level时,level 3的列表再也不会显示出来。
when first item in pickerItems has only 2 levels(other items has 3 levels), level 3 view will never show

Picker localization

Hi,
how is possible to localize cancel and confirm strings of this picker? I have an app in english and italian language but when I run it in italian, the picker shows Cancel and Confirm label instad of their italian translation.
Thanks.
Flavio

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

.showDialog(contex) - error for define style

Please check the parameters for customizing ShowDialog pickers.
When I try to customize ShowDialog through the confirmTextStyle: TextStyle command (color: Colors.pink, fontSize: 20), it has no effect for showDialog type pickers.
For example:
showPickerHora(BuildContext context) {
Picker(
adapter: NumberPickerAdapter(data: [
NumberPickerColumn(begin: 06, end: 14, onFormatValue: (v) {
return v < 10 ? "0$v" : "$v"; }),
NumberPickerColumn(begin: 00, end: 45, jump: 15, onFormatValue: (v) {
return v < 10 ? "0$v" : "$v"; }),
]),
cancelText: "Voltar",
cancelTextStyle: TextStyle(fontSize: 20, color: Color(0xffff1a7f)), //it has no effect for showDialog type pickers
confirmText: "Confirmar",
confirmTextStyle: TextStyle(fontSize: 20, color: Color(0xffff1a7f)), //it has no effect for showDialog type pickers
delimiter: [
PickerDelimiter(child: Container(
width: 30.0,
alignment: Alignment.center,
child: Text(":", style: TextStyle(fontSize: 20),),
))
],
hideHeader: true,
title: Text("Defina o horário de chegada da diarista"),
selectedTextStyle: TextStyle(color: Color(0xffff1a7f)),
onConfirm: (Picker picker, List value) {
print(value.toString());
print(picker.getSelectedValues());
}
).showDialog(context);
}

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.

Remove debug print statements from code

Would be great when the various print statements (obviously needed for debugging) could be removed.
Would be better, when really needed, to provide a debug flag that would then print the information.

Regards,
Florian

无法隐藏头部的边线

使用headerDecoration无法去除标题栏的分割线,原因是在代源代码当中,分割线属于下面内容区域的上边线

图片

Enhancement: Dismiss dialog callback

It would be nice if the option barrierDismissible of the standard Flutter Dialog could be passed as an option in order to keep the dialog open until we press cancel or confirm. This is useful because we have no callback method to catch the case of dialog dissmiss by clicking on the background.

设置minValue和MaxValue效果不似预期

用DateTimePickerAdapter,设置参数minValue为当天和maxValue为5天后,没有对应的时间可显示,如果只设置minValue为当天,年份不对,只能显示到2018年

Safe Area needs to be added.

Great widget :)

Can you add a safearea at the bottom for devices which need it. On a iPhone XS Max when scrolling the picker at the bottom of the page it sometimes grabs the bottom bar and then swipes the whole application to close.

android build apk错误

Initializing gradle... 1.6s
Resolving dependencies... 4.3s
Running 'gradlew assembleRelease'...
compiler message: file:///C:/Users/Administrator/AppData/Roaming/Pub/Cache/hosted/pub.flutter-io.cn/flutter_picker-1.0.2/lib/PickerLocalizationsDelegate.dart:17:3: Error: 'Future' expects 0 type arguments.
compiler message: Future load(Locale locale) {
compiler message: ^
compiler message: file:///C:/Users/Administrator/AppData/Roaming/Pub/Cache/hosted/pub.flutter-io.cn/flutter_picker-1.0.2/lib/PickerLocalizationsDelegate.dart:17:31: Error: The return type of the method 'PickerLocalizationsDelegate::load' is invalid-type, which does not match the return type of the overri
dden method (dart.async::Future<#lib1::PickerLocalizations>).
compiler message: Change to a subtype of dart.async::Future<#lib1::PickerLocalizations>.
compiler message: Future load(Locale locale) {
compiler message: ^
compiler message: file:///D:/flutter/packages/flutter/lib/src/widgets/localizations.dart:113:13: Error: This is the overriden method ('load').
compiler message: Future load(Locale locale);
compiler message: ^
compiler message: file:///C:/Users/Administrator/AppData/Roaming/Pub/Cache/hosted/pub.flutter-io.cn/flutter_picker-1.0.2/lib/PickerLocalizationsDelegate.dart:18:12: Error: A value of type '#lib1::SynchronousFuture<#lib2::PickerLocalizations>' can't be assigned to a variable of type 'invalid-type'.
compiler message: Try changing the type of the left hand side, or casting the right hand side to 'invalid-type'.
compiler message: return SynchronousFuture(PickerLocalizations(locale));
compiler message: ^
Compiler terminated unexpectedly.

FAILURE: Build failed with an exception.

  • Where:
    Script 'D:\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 428

  • What went wrong:
    Execution failed for task ':app:flutterBuildRelease'.

Process 'command 'D:\flutter\bin\flutter.bat'' finished with non-zero exit value 1

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

  • Get more help at https://help.gradle.org

改变上级数据,下级数据显示空白

GIF
如果所示,当选择7月22号或之后的日期时选择8月份,无法自动滚到8月9号。期望与选择7月21号时一样可以自动滚到8月最后一个数据即8月9号。

showYmdDialog(context, DateTime.now().add(Duration(days: 1)), DateTime.now().add(Duration(days: 31)), (value) {});

void showYmdDialog(BuildContext context, DateTime startDate, DateTime endDate, Function onConfirm) {
  int lastDayOfMonth(DateTime date) {
    return DateTime(date.year, date.month + 1, 0).day;
  }

  List<PickerItem<String>> generatePickerData(DateTime startDate, DateTime endDate) {
    List<PickerItem<String>> pickerData = [];
    int limitDay = endDate
        .difference(startDate)
        .inDays;

    var date = startDate;
    for (var year = startDate.year; year <= endDate.year; year++) {
      // 年
      PickerItem<String> yearItem = PickerItem(
        text: Center(child: Text(year.toString())),
        value: year.toString(),
        children: [],
      );
      pickerData.add(yearItem);
      for (var month = date.month; month <= 12; month++) {
        // 月
        PickerItem<String> monthItem = PickerItem(
          text: Center(child: Text(month.toString())),
          value: month.toString(),
          children: [],
        );
        yearItem.children.add(monthItem);
        while (date.day <= lastDayOfMonth(date)) {
          // 日
          PickerItem<String> dayItem = PickerItem(
            text: Center(child: Text(date.day.toString())),
            value: date.day.toString(),
          );
          monthItem.children.add(dayItem);

          date = date.add(Duration(days: 1));
          limitDay--;

          if (limitDay < 0) {
            return pickerData;
          }

          if (date.day == 1) {
            break;
          }
        }
      }
    }

    return pickerData;
  }

  List<PickerItem<String>> pickerData = generatePickerData(startDate, endDate);

  Picker(
      adapter: PickerDataAdapter(data: pickerData),
      confirmText: '确认',
      cancelText: '取消',
      textStyle: TextStyle(color: Colors.black, fontSize: 14.0),
      cancelTextStyle: TextStyle(fontSize: 16.0, color: ColorValues.greyFF9C9C9C),
      confirmTextStyle: TextStyle(fontSize: 16.0, color: ColorValues.blueFF3A94F9),
      onConfirm: (Picker picker, List value) {
        onConfirm(picker.adapter.getSelectedValues().map((text) => text.toString().padLeft(2, "0")).join("-"));
      },
      onCancel: () {
        print('取消');
      }).showModal(context);
}

Making data model for independent value groups

I am trying to figure out how to make the data array of PickerItems (or a Json) that isn't linked with it's children, and can't find the right method. I'm wanting to use this for a Height Picker with Feet & Inches, and a Weight Picker with Pounds & Ounces, but I don't want the the two sides of the data fields linked with each other. So on one side would be values of 0 ' - 7 ' then 0 " - 11 " and for the weight I want lbs and oz with a range. It would have been nice to set a picker with a min int and max int, but I could live with putting the text and values by hand. Is there a way to code this the way it is, or is this a feature request?

I was also looking for a way to set the initial saved data value, so when I go back to edit a picker, it starts with the current values. I studied the docs and examples and couldn't find the answers. Thanks.

Minor bug with time picker using PickerDateTimeType.kHM_AP

This should be an easy one.. The time picker with AM PM works, except the hours go from 0 - 11 instead of 1 - 12.. It kinda works for military time going from 0 - 23 because 0:00 is the same as 24:00 in some standards, but looks wrong with the AM/PM.. Using adapter like this:
adapter: new DateTimePickerAdapter(
type: PickerDateTimeType.kHM_AP,
strAMPM: ['AM', 'PM']
),

As a side note, if I don't have the strAMPM I get an error that points to PickerLocalizations being null..

Default value for DateTime Picker

Can I set the default time for the DateTime Picker? I have tried selecteds, but the picker always uses the current time:

  showPickerDateTime(BuildContext context) {
    Picker(
        hideHeader: true,
        adapter: DateTimePickerAdapter(
            type: PickerDateTimeType.kHMS,
        ),
        title: Text("Select run time"),
        cancelText: "Cancel",
        confirmText: "Select",
        selecteds: [0, 0, 0, 1, 0, 10, 0, 0],
        onConfirm: (Picker picker, List value) {
          print(picker.adapter.text);
        },
        onSelect: (Picker picker, int index, List<int> selecteds) {}
    ).showDialog(context);
  }

动态生成PickerItem

请问如何动态生成PickerItem呢,我生成的PickerItem泛型是这样的 List<PickerItem>,要求传入List<PickerItem> ,但是我不知道怎么生成

Broken

Launching lib\main.dart on Lenovo TB 8504X in debug mode...
compiler message: file:///E:/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_picker-1.0.1/lib/Picker.dart:51:16: Error: Type 'PickerLocalizationsDelegate' not found.
compiler message: static const PickerLocalizationsDelegate delegate =
compiler message: ^
compiler message: lib/main.dart:23:18: Error: A value of type 'invalid-type' can't be assigned to a variable of type '#lib1::LocalizationsDelegate'.
compiler message: Try changing the type of the left hand side, or casting the right hand side to '#lib1::LocalizationsDelegate'.
compiler message: Picker.delegate,
compiler message: ^
compiler message: file:///E:/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_picker-1.0.1/lib/Picker.dart:51:16: Error: 'PickerLocalizationsDelegate' isn't a type.
compiler message: static const PickerLocalizationsDelegate delegate =
compiler message: ^^^^^^^^^^^^^^^^^^^^^^^^^^^
compiler message: file:///E:/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_picker-1.0.1/lib/Picker.dart:52:13: Error: Method not found: 'PickerLocalizationsDelegate'.
compiler message: const PickerLocalizationsDelegate();
compiler message: ^
Compiler failed on E:\Documents\VS Code\picker\lib\main.dart

FAILURE: Build failed with an exception.

  • Where:
    Script 'E:\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 460

  • What went wrong:
    Execution failed for task ':app:flutterBuildDebug'.

Process 'command 'E:\flutter\bin\flutter.bat'' finished with non-zero exit value 1

  • Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

  • Get more help at https://help.gradle.org

BUILD FAILED in 10s
Gradle build failed: 1
Exited (sigterm)

how to have always 2 decimals ?

Hello and thank you for your work. I have a question, how can I have always 2 decimal like 01 02 03 04 05 06 07 08 09 10 11 etc currently it's 1 2 3 4 5 6 7 8 9 10 11 etc. I use NumberPicker

[Solved] Bug: Date numbers not refreshing correctly

Hello, I noticed that when you are currently on a month with 31 days and scroll to a month with 30 then the day scroller updates and has now options until day 30 and that's totally correct! But if you now switch back to the month that has 31 days (generally to a month with more days than the one selected), the day scroller does not refresh and it's options remain until day 30. If you try to scroll the day then it refreshes correctly and day 31 is available again as an option.

Problem: Image of Bug

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.