Articles in this section
Category / Section

How to customize the action buttons in Flutter SfDateRangePicker?

In the Flutter DateRangePicker, we've prepared a simple sample to handle 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,
              ),
            ),
          ],
        ),
      )),


View the Github Sample here.


Flutter action button customization

 

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