How can a Date Range Picker in Flutter save the range automatically?

Question

I have added a date range picker to my code. As shown in the image, I am using the text 'Select' for the saving button. However, I want to change this behavior so that the date range is saved as soon as the end date is selected, and the pop-up is dismissed. Upon reviewing the documentation for this function, it seems that this behavior is not allowed, as the function requires user input (via the saving button) before the date range is saved. How can I overcome this issue? Is there a way to customize this function, or should I create a completely customized date range picker?

Here's a snippet of my code:

_showDatePicker() async {
    DateTimeRange? dates = await showDateRangePicker(
        context: context,
        firstDate: widget.dateFrom ?? DateTime.now(),
        lastDate: DateTime(2033, 12, 31),
        currentDate: DateTime.now(),
        useRootNavigator: true,
        saveText: 'Select',
        builder: (context, child) {
          return Column(
            children: [
              ConstrainedBox(
                constraints: BoxConstraints(
                    maxWidth: 400.0, maxHeight: 700.0),
                child: Container(
                  padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
                  child: child,
                ),
              )
            ],
          );
        });

    if (dates != null) {
      if (dates == 1) {
        setState(() {
          widget.onChanged!(dates.start, dates.start
        );
      } else {
         widget.onChanged!(dates.start, dates.end);
      }
    }
  }

I even tried to call the Navigator.pop() function, but nothing happens until the button is pressed.

score 0 · Answer 1 · answered Aug 17 '23 at 16:14

It seems at this point it's not possible to listen on the events onStartDateChanged and onEndDateChanged of the DateRangePicker.

If we take a look at the source code it seems these events are available in _CalendarRangePickerDialog and in _CalendarDateRangePicker, which are unfortunately, private classes.

An alternative is to build a custom date range picker dialog based on already available calendar packages.

I can only recommend table_calendar because I used in in two projects. It is one of the most popular packages for custom calendar widgets. It is very customizable but this might come with a price, as it can become difficult to setup depending on how advanced your use case is.

A TableCalendar widget exposes many events that you can work with, one of which might be of interest for you: onRangeSelected.

How can a Date Range Picker in Flutter save the range automatically?

1 Answers1