Articles in this section
Category / Section

How to select a week in the Flutter Date Range Picker (SfDateRangePicker)

In the Flutter Date Range Picker, you can select the entire week when selecting a single day using the `onSelectionChanged` callback and `enableSwipeSelection` property.

Step 1:

Inside the state, initialize the controller for date range picker.

final DateRangePickerController _controller = DateRangePickerController();

 

Step 2:

Place the date range picker inside the body of the Scaffold widget, set the `selectionMode` as range selection and trigger the `onSelectionChanged` callback of the flutter date picker.

return Scaffold(
  body: Column(
    children: <Widget>[
      Card(
        margin: const EdgeInsets.fromLTRB(50, 100, 50, 100),
        child: SfDateRangePicker(
          controller: _controller,
          view: DateRangePickerView.month,
          selectionMode: DateRangePickerSelectionMode.range,
          onSelectionChanged: selectionChanged,
          monthViewSettings: DateRangePickerMonthViewSettings(enableSwipeSelection: false),
        ),
      )
    ],
  ), 
);

 

Step 3:

Find the `startDate` and `endDate` from the `onSelectionChanged` event args. Calculate the first day of the week for `startDate`, `endDate`, and add the remaining dates to the start and end dates for the week selection. Then assign those dates to the `selectedRange` property of controller. Please find the code for the same.

void selectionChanged(DateRangePickerSelectionChangedArgs args) {
  int firstDayOfWeek = DateTime.sunday % 7;
  int endDayOfWeek = (firstDayOfWeek - 1) % 7;
  endDayOfWeek = endDayOfWeek < 0? 7 + endDayOfWeek : endDayOfWeek;
  PickerDateRange ranges = args.value;
  DateTime date1 = ranges.startDate!;
  DateTime date2 = (ranges.endDate?? ranges.startDate)!;
  if(date1.isAfter(date2))
    {
      var date=date1;
      date1=date2;
      date2=date;
    }
  int day1 = date1.weekday % 7;
  int day2 = date2.weekday % 7;
 
  DateTime dat1 = date1.add(Duration(days: (firstDayOfWeek - day1)));
  DateTime dat2 = date2.add(Duration(days: (endDayOfWeek - day2)));
 
  if( !isSameDate(dat1, ranges.startDate)|| !isSameDate(dat2,ranges.endDate))
  {
    _controller.selectedRange = PickerDateRange(dat1, dat2);
  }
}

 

View the Github Sample here.


 


week selection

 

 

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