Articles in this section
Category / Section

How to select previous or next dates based on the selected date in the Flutter Date Range Picker (SfDateRangePicker)

1 min read

In the Flutter Date Range Picker, you can highlight the before and after date ranges of the selected date by using onSelectionChanged callback of the Flutter date range picker.

Inside the state, set the default values for date range picker.

final DateRangePickerController _controller = DateRangePickerController();

Using the onSelectionChanged callback find the startDate of the selected range and add previous and next dates of selected dates.

void selectionChanged(DateRangePickerSelectionChangedArgs args) {
  final List<PickerDateRange> dateRanges = (args.value as List<PickerDateRange>);
  final DateTime? date = dateRanges.isNotEmpty ? dateRanges[dateRanges.length - 1].startDate! : null;
 
  if (date != null && _controller.selectedRanges != null && dateRanges[dateRanges.length - 1].endDate == null) {
    _controller.selectedRanges  = <PickerDateRange>[
      PickerDateRange(date.add(Duration(days: -3)),
          date.add(Duration(days: -1))),
      PickerDateRange(date.add(Duration(days: 1)),
          date.add(Duration(days: 3)))
    ];
  }
}

Set the selection mode as multirange and assign _controller value to the controller property of the picker.

child: SfDateRangePicker(
  view: DateRangePickerView.month,
  controller: _controller,
  monthViewSettings: DateRangePickerMonthViewSettings(
      enableSwipeSelection: false),
  selectionMode: DateRangePickerSelectionMode.multiRange,
  onSelectionChanged:selectionChanged
))

View sample in GitHub

Selectedrange gif

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied