Flutter Make showDateRangePicker Smaller

Question

Following Flutter's documentation for showDateRangePicker creates a full-screen picker. This seems fine on mobile, but on iPad and web, it's obnoxious.

I need a way to constrain the proportions to make the overlay smaller.

Answer 1

Adding the builder parameter to the showDateRangePicker() function will allow you to place the date range picker inside a container or constrained box.

Keep in mind, this only seems to work when the parent widget of the builder is a Column.

Example:

dateTimeRangePicker() async {
      DateTimeRange picked = await showDateRangePicker(
          context: context,
          firstDate: DateTime(DateTime.now().year - 5),
          lastDate: DateTime(DateTime.now().year + 5),
          initialDateRange: DateTimeRange(
            end: DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day + 13),
            start: DateTime.now(),
          ),
          builder: (context, child) {
            return Column(
              children: [
                ConstrainedBox(
                  constraints: BoxConstraints(
                    maxWidth: 400.0,
                  ),
                  child: child,
                )
              ],
            );
          });
      print(picked);
    }

The ConstrainedBox widget allows us to specify maxWidth and maxHeight properties. This allows us to still see a full-screen display on smaller devices where it makes sense, but to limit the max size on larger devices like an iPad or web browser.

In my opinion, this widget looks great tall, because it shows many months you can scroll through. However, it does not look great wide.

The above example shows a maxWidth constraint only. But maxHeight could also be added if you wanted to limit that too.

With these constraints, the picker shows as an overlay, where the background is dimmed. You can click anywhere on the background to close the overlay, to cancel the selection and return null.