Flutter time selector implementation tutorial

preface

Hello everyone, it has been a while since I updated my article to you. I can’t remember how long it has been. Recently, I wrote a demo of flutter time selection and THOUGHT I would share it with you

The preparatory work

The development environment for Flutter needs to be installed: check out the previous tutorial:

Win System Flutter development environment installation tutorial:

www.jianshu.com/p/152447bc8…

Install the Flutter development environment for MAC system

www.jianshu.com/p/bad2c35b4…

Effect:

You need a tripartite library

Flutter_picker: # 1.1.5 bounced fluttertoast: https://pub.dev/packages/fluttertoast#-installing-tab- # ^ 7.0.4 time format conversion https://pub.dev/packages/date_format date_format: 1.0.8Copy the code

Please add dependencies to the pubspec.yaml file and enter flutter pub get on the console to download dependencies

Specific code implementation:

The singleton

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), 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); }Copy the code

We’ve defined a static method showStringPicker () that needs to be passed in the context to show the List data @required List data, String title, And the PickerDataAdapter adapter and callback @required _StringClickCallBack clickCallBack,

Concrete external call

Single row

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

Multiple columns

JhPickerTool. ShowArrayPicker (context, data: bb, the title: "please select 2", normalIndex: [0,1,0], clickCallBack:(var index, var strData){print(index); print(strData); showText(strData); });Copy the code

Time selector:

Concrete 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: DateTimePickerAdapter(type: timeType, isNumberMonth: true, yearSuffix:" year ", monthSuffix: "month ", daySuffix:" day ", strAMPM: Const [" am ", "PM "], 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()+ time.month.toString()+"; }else if(dateType == DateType.YMD_HM){ timeStr ToString () =time.year.toString()+ time.month.toString()+ time.day.toString()+ time.hour.toString()+ time.minute.tostring () G () + "points"; }else if(dateType == DateType.YMD_AP_HM){ var str = formatDate(time, [am])=="AM" ? "Morning ":" afternoon "; timeStr = time. Year. ToString () + "years" + time. The month. The toString () + "month" + time. Day. The toString () + ", "+ STR + time. The hour, the toString () +" "+ time. The minute the toS Tring () + "points"; }else{timeStr =time.year.toString()+ time.month.toString()+ time.day.toString()+ time.month.toString(); } // print(formatDate(DateTime(1989, 02, 21), [yyyy, '-', mm, '-', dd])); clickCallback(timeStr,picker.adapter.text); }); }Copy the code

This gets the time picker 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,
          })
Copy the code

So we need to pass in the context and we need to pass in the time selector type DateType which corresponds to our four styles YM, YMD_HM, DateTime maxValue and DateTime minValue are also required for YMD_AP_HM kYMD. As well as our adapter we will need to reassign using dataType based on the time type passed in externally

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;
        }
Copy the code

And then we call openModalPicker in the showDatePicker method body and we wrap the method in the popover selector at the bottom

openModalPicker(context, adapter: adapter ?? DateTimePickerAdapter(Type: timeType, isNumberMonth: true, yearSuffix: "year ", monthSuffix:" month ", daySuffix: "day ", strAMPM: DateTimePickerAdapter(type: timeType, isNumberMonth: true, yearSuffix:" year ", monthSuffix: "month ", daySuffix:" day ", strAMPM: Const [" am ", "PM "], 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()+ time.month.toString()+"; }else if(dateType == DateType.YMD_HM){ timeStr ToString () =time.year.toString()+ time.month.toString()+ time.day.toString()+ time.hour.toString()+ time.minute.tostring () G () + "points"; }else if(dateType == DateType.YMD_AP_HM){ var str = formatDate(time, [am])=="AM" ? "Morning ":" afternoon "; timeStr = time. Year. ToString () + "years" + time. The month. The toString () + "month" + time. Day. The toString () + ", "+ STR + time. The hour, the toString () +" "+ time. The minute the toS Tring () + "points"; }else{timeStr =time.year.toString()+ time.month.toString()+ time.day.toString()+ time.month.toString(); } // print(formatDate(DateTime(1989, 02, 21), [yyyy, '-', mm, '-', dd])); clickCallback(timeStr,picker.adapter.text); });Copy the code

In the DateTimePickerAdapter, the adapter always passes in the parameters we pass in from outside and gets the current time datetime.now (), The picker.adapter property value is retrieved from the picker.adapter in the callback method to retrieve the currently selected time

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

The specific conversion

clickCallBack:(Picker picker, List<int> selecteds){ var time = (picker.adapter as DateTimePickerAdapter).value; var timeStr; If (dateType == datetype.ym){timeStr =time.year.toString()+ time.month.toString()+"; }else if(dateType == DateType.YMD_HM){ timeStr ToString () =time.year.toString()+ time.month.toString()+ time.day.toString()+ time.hour.toString()+ time.minute.tostring () G () + "points"; }else if(dateType == DateType.YMD_AP_HM){ var str = formatDate(time, [am])=="AM" ? "Morning ":" afternoon "; timeStr = time. Year. ToString () + "years" + time. The month. The toString () + "month" + time. Day. The toString () + ", "+ STR + time. The hour, the toString () +" "+ time. The minute the toS Tring () + "points"; }else{timeStr =time.year.toString()+ time.month.toString()+ time.day.toString()+ time.month.toString(); } // print(formatDate(DateTime(1989, 02, 21), [yyyy, '-', mm, '-', dd])); clickCallback(timeStr,picker.adapter.text); }Copy the code

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

Specific time selector calls

If (STR = = "jhPickerTool - time choice YM") {jhPickerTool. ShowDatePicker (context, dateType: dateType. YM, clickCallback: (var str,var time){ print(str); print(time); showText(str); }); } the if (STR = = "jhPickerTool - time choose YMD_HM") {jhPickerTool. ShowDatePicker (context, dateType: dateType. YMD_HM, clickCallback: (var str,var time){ print(str); print(time); showText(str); }); } the if (STR = = "jhPickerTool - time choose YMD_AP_HM") {jhPickerTool. ShowDatePicker (context, dateType: DateType.YMD_AP_HM, clickCallback: (var str,var time){ print(str); print(time); showText(str); }); }}Copy the code

So we’re done here with the time selector and the bottom selector in one column and many columns

Conclusion:

Flutter_picker: 1.1.5 date_format: 1.0.8 Bottom selector and time conversion library for us to call, so the realization of the bottom popover is also thanks to the author’s sharing, which makes our development easier. Interested students can study in private and realize it in other ways. I will not expand on it here, and finally I hope my article can help you solve the problem. I will contribute more useful code to share with you in the future. If you think the article is good, please pay attention and star. Thank you!