How to Create the Customized DatePicker in Flutter Calendar?
The SfCalendar has built-in support for enabling the date picker through the showDatePickerButton property in the calendar, which displays the date picker in the header view. This feature allows for quick navigation between different calendar views. However, when the showDatePickerButton option is enabled, the default date picker does not support color and style customization.
In this article, we describe how to create a customized date picker in SfCalendar that allows for modifications in color and style. We will implement a custom header button that triggers an SfDateRangePicker.
The following steps explain how to customize the date picker’s color and style in SfCalendar using a custom header button:
Step 1: Initialize the default SfCalendar
Initialize an SfCalendar widget with basic properties. Specify the initial view (like day, week, or month) and customize the color for highlighting today’s date. The SfCalendar is set with the CalendarView.day view to display the day view, and the todayHighlightColor property is customized to highlight today’s date in green.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: SfCalendar(
view: CalendarView.day,
todayHighlightColor: const Color.fromRGBO(35, 188, 1, 1),
),
),
],
),
);
}
Step 2: Initialize a controller for the Calendar and Date Picker
To manage both the SfCalendar and SfDateRangePicker states, initialize CalendarController and DateRangePickerController. These controllers will help synchronize the selected date between the calendar and the date picker. Additionally, declare variables to store the currently selected date and the header text that displays the month and year.
CalendarController controller = CalendarController();
DateRangePickerController datePickerController = DateRangePickerController();
String? _headerText;
DateTime? selectedDate;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: SfCalendar(
controller: controller,
.....
Step 3: Hide the default Calendar header
To display our custom date picker button, the default header of the SfCalendar must be hidden. Set the headerHeight property to 0 to create space for a custom button in place of the default header.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: SfCalendar(
headerHeight: 0,
.....
Step 4: Add a custom header with a date picker button
Add a custom header using a TextButton that displays the selected date and triggers the SfDateRangePicker on tap. This header replaces the default date picker button and allows you to apply custom styles.
The onViewChanged callback in SfCalendar updates _headerText with the current month and year, depending on the visible dates. This method retrieves the first date in the visible range (viewChangedDetails.visibleDates[0]), formats it to display only the month and year, and updates _headerText. Use addPostFrameCallback to ensure the setState function updates the UI after the view change.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Row(
children: [
Container(
color: Colors.white,
child: TextButton(
child: Text(
_headerText ?? '',
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 20,
color: Colors.black,
),
),
onPressed: () {}, // This will be defined in Step 5.
),
),
],
),
Expanded(
child: SfCalendar(
onViewChanged: (viewChangedDetails) {
if (viewChangedDetails.visibleDates.isNotEmpty) {
_headerText = DateFormat('MMMM yyyy').format(viewChangedDetails.visibleDates[0]);
}
SchedulerBinding.instance.addPostFrameCallback(
(duration) {
setState(() {});
},
);
},
.....
Step 5: Implement the date picker trigger
When the custom button is tapped, display an SfDateRangePicker inside a dialog. Use SfDateRangePickerTheme to apply custom colors and styles, such as background color, selection color, and text styles, to the picker.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Row(
children: [
Container(
color: Colors.white,
child: TextButton(
child: Text(
.....
),
onPressed: () {
datePickerController.displayDate = selectedDate;
showDialog(
context: context,
builder: (context) {
return Center(
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.9,
height: MediaQuery.of(context).size.height * 0.7,
child: SfDateRangePickerTheme(
data: const SfDateRangePickerThemeData(
backgroundColor: Colors.white,
headerBackgroundColor: Colors.white,
todayCellTextStyle: TextStyle(
color: Colors.black,
fontSize: 20,
),
selectionColor: Color.fromRGBO(35, 188, 1, 1),
todayTextStyle: TextStyle(color: Color.fromRGBO(35, 188, 1, 1)),
todayHighlightColor: Color.fromRGBO(35, 188, 1, 1),
headerTextStyle: TextStyle(
color: Colors.black,
fontSize: 20,
),
),
child: SfDateRangePicker(
controller: datePickerController,
),
),
),
);
},
);
},
),
),
],
),
Expanded(
child: SfCalendar(
.....
Step 6: Synchronize selected date with SfCalendar
To ensure the selected date in the SfDateRangePicker synchronizes with the SfCalendar, use the onSelectionChanged callback of the SfDateRangePicker to update selectedDate and set the displayDate of calendarController using onViewChanged callback in SfCalendar.
onPressed: () {
datePickerController.displayDate = selectedDate;
showDialog(
child: SfDateRangePicker(
controller: datePickerController,
onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {
selectedDate = args.value;
controller.displayDate = selectedDate;
Navigator.pop(context);
},
.....
),
Expanded(
child: SfCalendar(
onViewChanged: (viewChangedDetails) {
if (viewChangedDetails.visibleDates.isNotEmpty) {
_headerText = DateFormat('MMMM yyyy').format(viewChangedDetails.visibleDates[0]);
selectedDate = viewChangedDetails.visibleDates[0];
}
SchedulerBinding.instance.addPostFrameCallback(
(duration) {
setState(() {});
},
);
},
.....
Now, the customized date picker in Flutter Calendar using a custom header button has been implemented as shown below.
View the GitHub sample here: Customized date picker in on Flutter Calendar using a custom header button
Conclusion
I hope you enjoyed learning how to create a customized DatePicker in Flutter Calendar.
You can refer to our Flutter Calendar feature tour page to know about its other groundbreaking feature representations documentation. You can also explore our Flutter Calendar example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trialto check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
