Category / Section
How to hide empty rows when the leading and trailing dates hidden in Flutter date range picker (SfDateRangePicker)
1 min read
In the Flutter date range picker, you can hide the empty rows when the leading and trailing dates are hidden.
Set the initial value for weeksInMonth and place the picker inside the ClipRect widget. Based on the heightFactor of the ClipRect widget, you can hide the empty rows of the date picker.
Based on the view start date from the onViewChanged callback calculate the number of weeks to be displayed, based on that calculated week set the height for the picker so that the empty row will be clipped.
ClipRect(
child: Align(
alignment: Alignment.topCenter,
heightFactor: 1 - (6 - weeksInMonth) / 7,
child: Container(
height: 200,
padding: EdgeInsets.fromLTRB(4, 0, 4, 4),
child: SfDateRangePicker(
view: DateRangePickerView.month,
onViewChanged: (DateRangePickerViewChangedArgs args) {
if (args.visibleDateRange.startDate!.weekday >=
DateTime.friday &&
(args.visibleDateRange.endDate!.weekday ==
DateTime.sunday ||
args.visibleDateRange.endDate!.weekday ==
DateTime.monday)) {
SchedulerBinding.instance!.addPostFrameCallback((_) {
setState(() {
weeksInMonth = 6;
});
});
} else if (weeksInMonth == 6) {
weeksInMonth = 5;
}
},
),
),
),
),
|
