Category / Section
How to customize the action buttons in the Flutter DateRangePicker (SfDateRangePicker)?
1 min read
In the Flutter DateRangePicker, we prepared a simple sample to handle the action button functionalities using custom widgets.
STEP 1: Initialize the default values for the picker.
final DateRangePickerController _controller = DateRangePickerController(); DateTime? selectedDate;
STEP 2:
Add the custom action buttons and handle the action using the selectedDate property of the DateRangePickerController.
body: SafeArea(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
onPressed: () {
selectedDate = _controller.selectedDate;
},
child: Text("Confirm"),
),
TextButton(
onPressed: () {
_controller.selectedDate = selectedDate;
},
child: Text("Cancel"),
),
],
),
Expanded(
child: SfDateRangePicker(
view: DateRangePickerView.month,
selectionMode: DateRangePickerSelectionMode.single,
controller: _controller,
),
),
],
),
)),
|
