Articles in this section
Category / Section

How to customize the action buttons in Flutter SfDateRangePicker?

1 min read

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)
Please  to leave a comment
Access denied
Access denied