flutterdartflutter-datetime-picker

Is there a way to override the height/width of the date picker created by showDatePicker?


I am trying to increase the height and width of the date picker dialog shown when calling showDatePicker(). It currently appears quite small on tablets and I want to make it easier to interact with by increasing it's overall size. I have tried a few solutions which will be detailed below.

Example of how date picker dialog appears on tablet portrait, doesn't really make use of available space

First I tried following the accepted answer detailed on this question which seemingly can change the height and of the date picker dialog but only up to a point (max width 328, max height 512) which isn't very useful when the size is still too small on tablet devices.

Next I dug into the date picker source code and found the private values which seems to control the overall size of the dialog. The main value of interest for me being const Size _calendarPortraitDialogSizeM3 = Size(328.0, 512.0); Is there any way to override this value without just copying the entirety of the source code for date_picker.dart and changing the value myself? I fear this would introduce maintenance concerns with trying to keep my copied version of the date_picker.dart code up to date with changes to the original source code.


Solution

  • The simplest solution I can think of is to use Transform.scale.

    showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2010),
      lastDate: DateTime.now(),
      builder: (context, child) {
        /// Apply a transform to the date picker.
        /// You can calculate the value of [scale] based on device size, etc.
        return Transform.scale(
          scale: 1.33, /// 33% bigger
          child: child,
        );
      },
    );