IOS style selector. The child widgets are displayed on the scroll wheel for selection and are called back when the currently selected item changes. Can be used with the showModalBottomSheet to display the selection modally at the bottom of the screen, basically the same as ListWheelScrollView.

CupertinoPicker

void _showCupertinoPicker(BuildContext cxt){
    final picker  = CupertinoPicker(itemExtent: 20,
        onSelectedItemChanged: (position){
         print('The position is $position');
        }, children: [
          Text("0"),
          Text("1"),
          Text("2"),
          Text("3"),
          Text("4"),]); showCupertinoModalPopup(context: cxt, builder: (cxt){return Container(
        height: 200,
        child: picker,
      );
    });
  }
Copy the code

Its construction method is as follows:

      CupertinoPicker({
    Key key,
    this.diameterRatio = _kDefaultDiameterRatio,
    this.backgroundColor = _kDefaultBackground,
    this.offAxisFraction = 0.0.this.useMagnifier = false.this.magnification = 1.0.this.scrollController,
    @required this.itemExtent,
    @required this.onSelectedItemChanged,
    @required List<Widget> children,
    bool looping = false,})Copy the code

Double Diameterterratio: The ratio between the height of the pick and the diameter of the simulated cylinder. Smaller values produce more pronounced curvature in the scrollable wheel. Details ListWheelScrollView diameterRatio, cannot be null, the default value is “1.1” to mimic iOS visually.

Double itemExtent Uniform height of all child controls. All children will get BoxConstraints to match the exact height. Can’t be null, must be greater than 0.

ValueChanged

onSelectedItemChanged scrolls the selected back out.

Array of children child widgets.

The looping argument determines whether the sublist is circular and can scroll indefinitely. If set to true, scrolling the end of the list loops the list back to the beginning. If set to false, the list will stop scrolling when the end or beginning is reached.

CupertinoDatePicker

Construct an ios-style date picker.

  void _showCupertinoDatePicker(BuildContext cxt){
    final picker =CupertinoDatePicker(onDateTimeChanged: (date){
      print("the date is ${date.toString()}");
    },
      initialDateTime: DateTime(1995)); showCupertinoModalPopup(context: cxt, builder: (cxt){return Container(
        height: 200,
        child: picker,
      );
    });
  }
Copy the code

Its construction method is as follows:

CupertinoDatePicker({
    this.mode = CupertinoDatePickerMode.dateAndTime,
    @required this.onDateTimeChanged,
    // ignore: always_require_non_null_named_parameters
    DateTime initialDateTime,
    this.minimumDate,
    this.maximumDate,
    this.minimumYear = 1.this.maximumYear,
    this.minuteInterval = 1.this.use24hFormat = false,})Copy the code

Mode is one of the CupertinoDatePickerMode listed in the model, the default for CupertinoDatePickerMode. DateAndTime.

OnDateTimeChanged is a callback called when the selected date or time changes and cannot be NULL.

InitialDateTime is the initialDateTime of the selector. The default value is the current date and time and cannot be null. MinimumDate, maximumDate, minimumYear, and maximumYear must comply with the minimumDate, maximumDate, minimumYear, and maximumYear ranges.

Use24hFormat Specifies whether to use the 24-hour format. The default is false.

CupertinoTimerPicker

void _showCupertinoTimerPicker(BuildContext cxt){
   final picker = CupertinoTimerPicker(onTimerDurationChanged: (duration){
     print('the time is $duration');
   });

  showCupertinoModalPopup(context: cxt, builder: (cxt){
    return Container(
      height: 200,
      child: picker,
    );
  });
}
Copy the code

It’s very similar to CupertinoPicker and CupertinoDatePicker.