preparation

You need to install the development environment of fluent: you can take a look at the previous tutorial:

1. Installation tutorial of fluent development environment of win system: https://www.jianshu.com/p/152447bc8718

2. MAC system fluent development environment installation tutorial: https://www.jianshu.com/p/bad2c35b41e3

Third party libraries are required

 flutter_picker: 1.1.5
  # Spring frame https://pub.dev/packages/fluttertoast#-installing-tab-
  fluttertoast: ^7.0.4
  # Time format conversion https://pub.dev/packages/date_format
  date_format: 1.0.8

Please add the dependency in the pubspec.yaml file, and then enter fluent pub get on the console to download the dependency

Specific code implementation:

Single case

   static void showStringPicker<T>(
        BuildContext context, {
          @required List<T> data,
          String title,
          int normalIndex,
          PickerDataAdapter adapter,
          @required _StringClickCallBack clickCallBack,
        }) {
​
        openModalPicker(context,
            adapter: adapter ??  PickerDataAdapter( pickerdata: data, isArray: false),
            clickCallBack:(Picker picker, List<int> selecteds){
              //          print(picker.adapter.text);
            clickCallBack(selecteds[0],data[selecteds[0]]);
           },
        selecteds: [normalIndex??0] ,
            title: title);
        }
 static void openModalPicker(
            BuildContext context, {
              @required PickerAdapter adapter,
              String title,
              List<int> selecteds,
              @required PickerConfirmCallback clickCallBack,
            }) {
          new Picker(
            adapter: adapter,
            title: new Text(title ?? "Please select",style:TextStyle(color: _kTitleColor,fontSize: _kTextFontSize)),
            selecteds: selecteds,
            cancelText: 'cancel',
            confirmText: 'determine',
            cancelTextStyle: TextStyle(color: _kBtnColor,fontSize: _kTextFontSize),
            confirmTextStyle: TextStyle(color: _kBtnColor,fontSize: _kTextFontSize),
            textAlign: TextAlign.right,
            itemExtent: _kItemHeight,
            height: _kPickerHeight,
            selectedTextStyle: TextStyle(color: Colors.black),
            onConfirm:clickCallBack
          ).showModal(context);
        }

We have defined a static method showStringPicker(), which needs to pass in the context to display list data @ required list < T > data, String title, PickerDataAdapter adapter and callback @ required_ StringClickCallBack clickCallBack,

Specific external call

Single column

JhPickerTool.showStringPicker(context,
                  data: aa,
                  normalIndex: 2,
      //          title: "please select 2",
                  clickCallBack: (int index,var str){
                   print(index);
                   print(str);
                   showText(str);
                 }
            );

Multi column

 JhPickerTool.showArrayPicker(context,
                    data: bb,
                    title: "Please select 2",
                    normalIndex: [0,1,0],
                    clickCallBack:(var index, var strData){
                    print(index);
                    print(strData);
                    showText(strData);
                    }
                );

Specific implementation:

static void showDatePicker(
          BuildContext context, {
          DateType dateType,
          String title,
          DateTime maxValue,
          DateTime minValue,
          DateTime value,
          DateTimePickerAdapter adapter,
          @required _DateClickCallBack clickCallback,
          }) {
​
        int timeType;
        if(dateType == DateType.YM){
          timeType =  PickerDateTimeType.kYM;
        }else if(dateType == DateType.YMD_HM){
          timeType =  PickerDateTimeType.kYMDHM;
        }else if(dateType == DateType.YMD_AP_HM){
          timeType =  PickerDateTimeType.kYMD_AP_HM;
        }else{
          timeType =  PickerDateTimeType.kYMD;
        }
        openModalPicker(context,
        adapter: adapter ??
        DateTimePickerAdapter(
        type: timeType,
        isNumberMonth: true,
        yearSuffix: "year",
        monthSuffix: "month",
        daySuffix: "day",
        strAMPM: const["morning", "afternoon"],
        maxValue: maxValue ,
        minValue: minValue,
        value: value ?? DateTime.now(),
        ),
        title: title,
        clickCallBack:(Picker picker, List<int> selecteds){
​
          var time = (picker.adapter as DateTimePickerAdapter).value;
          var timeStr;
          if(dateType == DateType.YM){
            timeStr =time.year.toString()+"year"+time.month.toString()+"month";
          }else if(dateType == DateType.YMD_HM){
            timeStr =time.year.toString()+"year"+time.month.toString()+"month"+time.day.toString()+"day"+time.hour.toString()+"Time"+time.minute.toString()+"branch";
          }else if(dateType == DateType.YMD_AP_HM){
          var str = formatDate(time, [am])=="AM" ? "morning":"afternoon";
          timeStr =time.year.toString()+"year"+time.month.toString()+"month"+time.day.toString()+"day"+str+time.hour.toString()+"Time"+time.minute.toString()+"branch";
          }else{
            timeStr =time.year.toString()+"year"+time.month.toString()+"month"+time.day.toString()+"day";
          }
//          print(formatDate(DateTime(1989, 02, 21), [yyyy, '-', mm, '-', dd]));
             clickCallback(timeStr,picker.adapter.text);
          }
          );
   }

Here, the time selector is obtained by calling the showDatePicker method

    static void showDatePicker(
          BuildContext context, {
          DateType dateType,
          String title,
          DateTime maxValue,
          DateTime minValue,
          DateTime value,
          DateTimePickerAdapter adapter,
          @required _DateClickCallBack clickCallback,
          })

We need to pass in the corresponding context and time selector type. DateType corresponds to the four styles YM and YMD in the above figure_ HM ，YMD_ AP_ The four types of HM kymd also need to pass in the maximum time and minimum time, datetime maxvalue and datetime minValue. This non completion transmission depends on the specific situation, as well as our adapter. We re assign the required dataType according to the externally passed in time type

int timeType;
        if(dateType == DateType.YM){
          timeType =  PickerDateTimeType.kYM;
        }else if(dateType == DateType.YMD_HM){
          timeType =  PickerDateTimeType.kYMDHM;
        }else if(dateType == DateType.YMD_AP_HM){
          timeType =  PickerDateTimeType.kYMD_AP_HM;
        }else{
          timeType =  PickerDateTimeType.kYMD;
        }

Then we call openModalPicker in the showDatePicker method body, and we encapsulate the method of the bottom pop-up selector

    openModalPicker(context,
        adapter: adapter ??
        DateTimePickerAdapter(
        type: timeType,
        isNumberMonth: true,
        yearSuffix: "year",
        monthSuffix: "month",
        daySuffix: "day",
        strAMPM: const["morning", "afternoon"],
        maxValue: maxValue ,
        minValue: minValue,
        value: value ?? DateTime.now(),
        ),
        title: title,
        clickCallBack:(Picker picker, List<int> selecteds){
​
          var time = (picker.adapter as DateTimePickerAdapter).value;
          var timeStr;
          if(dateType == DateType.YM){
            timeStr =time.year.toString()+"year"+time.month.toString()+"month";
          }else if(dateType == DateType.YMD_HM){
            timeStr =time.year.toString()+"year"+time.month.toString()+"month"+time.day.toString()+"day"+time.hour.toString()+"Time"+time.minute.toString()+"branch";
          }else if(dateType == DateType.YMD_AP_HM){
          var str = formatDate(time, [am])=="AM" ? "morning":"afternoon";
          timeStr =time.year.toString()+"year"+time.month.toString()+"month"+time.day.toString()+"day"+str+time.hour.toString()+"Time"+time.minute.toString()+"branch";
          }else{
            timeStr =time.year.toString()+"year"+time.month.toString()+"month"+time.day.toString()+"day";
          }
//          print(formatDate(DateTime(1989, 02, 21), [yyyy, '-', mm, '-', dd]));
             clickCallback(timeStr,picker.adapter.text);
          }
          );

In the DateTimePickerAdapter, we always pass in the parameters we passed in from the outside and get the current time DateTime.now(). In the callback callback method, we get the attribute value in the adapter through picker.adapter to get the currently selected time

      var time = (picker.adapter as DateTimePickerAdapter).value;

Concrete transformation

    clickCallBack:(Picker picker, List<int> selecteds){
​
          var time = (picker.adapter as DateTimePickerAdapter).value;
          var timeStr;
          if(dateType == DateType.YM){
            timeStr =time.year.toString()+"year"+time.month.toString()+"month";
          }else if(dateType == DateType.YMD_HM){
            timeStr =time.year.toString()+"year"+time.month.toString()+"month"+time.day.toString()+"day"+time.hour.toString()+"Time"+time.minute.toString()+"branch";
          }else if(dateType == DateType.YMD_AP_HM){
          var str = formatDate(time, [am])=="AM" ? "morning":"afternoon";
          timeStr =time.year.toString()+"year"+time.month.toString()+"month"+time.day.toString()+"day"+str+time.hour.toString()+"Time"+time.minute.toString()+"branch";
          }else{
            timeStr =time.year.toString()+"year"+time.month.toString()+"month"+time.day.toString()+"day";
          }
//          print(formatDate(DateTime(1989, 02, 21), [yyyy, '-', mm, '-', dd]));
             clickCallback(timeStr,picker.adapter.text);
          }

Then format the year, month and day, and return to the call page

Specific time selector call

 if(str == "jhPickerTool-Time selection YM"){
​
            JhPickerTool.showDatePicker(
                context,
                dateType: DateType.YM,
                clickCallback: (var str,var time){
                  print(str);
                  print(time);
                  showText(str);
                }
            );
          }
          if(str == "jhPickerTool-Time selection YMD_HM"){
​
            JhPickerTool.showDatePicker(
                context,
                dateType: DateType.YMD_HM,
                clickCallback: (var str,var time){
                  print(str);
                  print(time);
                  showText(str);
                }
            );
​
          }
          if(str == "jhPickerTool-Time selection YMD_AP_HM"){
​
            JhPickerTool.showDatePicker(
                context,
                dateType: DateType.YMD_AP_HM,
                clickCallback: (var str,var time){
                  print(str);
                  print(time);
                  showText(str);
                }
            );
          }
          }

At this point, we have finished talking about the time selector and the bottom selector, single column and multiple columns

Final summary:

Flutter provides a relatively easy-to-use flutter_picker: 1.1.5 date_format: 1.0.8 the bottom selector and time conversion library are for us to call, so the implementation of the bottom pop-up window should also be grateful to the author for sharing, which can make our development simple. Interested students can study privately and implement it in other ways. I won't talk about it here. Finally, I hope my article can help you solve problems, In the future, I will contribute more useful code to share with you.