Flutter: Custom Cupertino Date Picker

Hey guys, do you ever required to build a Cupertino date picker, similar to the one shown in the image below? But got frustrated because CupertinoDatePicker widget does not bring much (any) customizations. :-(

This article will help you to create one of your own Cupertino date picker, with unlimited possibilities for customizations. :-)

Find the updated article here.

Custom Cupertino Date Picker

Under the hood, the CupertinoDatePicker widget make use of CupertinoPicker widget, which brings some customizations.

We are also going to use the CupertinoPicker widget to achieve our goal!

1. Create a stateful widget for our custom date picker.

This widget will essentially be a wrapper to the CupertinoPicker widget. Declare all the parameters needed in a CupertinoPicker widget. (You can also limit yourself to the parameters you require.)

class CustomCupertinoDatePicker extends StatefulWidget {
  final double itemExtent;
  final Widget selectionOverlay;
  final double diameterRatio;
  final Color? backgroundColor;
  final double offAxisFraction;
  final bool useMaginifier;
  final double magnification;
  final double squeeze;
  final void Function(DateTime) onSelectedItemChanged;