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 ))
