Reputation: 7222
I want to customize DateRangePicker
in flutter, How can I change the following elements?
Save
button to image.Switch to input
button.header background
color.day name
color.background
color.selected item indicator
color.selected item text
color.selected range indicator
color.selected range text
color.showDateRangePicker(
context: context,
firstDate: DateTime.now(),
lastDate: DateTime.now().add(Duration(days: 100)),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData(
...
),
child: child,
);
},
);
Upvotes: 7
Views: 16251
Reputation: 419
I created a package calendar_date_picker2 supporting high-level customisations, just simply wrap it inside a Container and set the container color as the background colors.
Upvotes: 2
Reputation: 21
I copy below how to change almost everything you asked in terms of color customization:
showDateRangePicker(
context: context,
firstDate: DateTime.now(),
lastDate: DateTime.now().add(Duration(days: 100)),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.light().copyWith(
//Header background color
primaryColor: Colors.blue,
//Background color
scaffoldBackgroundColor: Colors.grey[50],
//Divider color
dividerColor: Colors.grey,
//Non selected days of the month color
textTheme: TextTheme(
bodyText2:
TextStyle(color: Colors.black),
),
colorScheme: ColorScheme.fromSwatch().copyWith(
//Selected dates background color
primary: Colors.blue,
//Month title and week days color
onSurface: Colors.black,
//Header elements and selected dates text color
//onPrimary: Colors.white,
),
),
child: child,
);
}
);
Upvotes: 2
Reputation: 61
Most of these things can only be changed by modifying the source, as others have said before. You can change the header background color by applying an appBarTheme in the builder callback of showDateRangePicker. The text colors and the selection color can also be set via applying a theme, you need to use a ColorScheme to set them. This example sets the header background to blue, the close icon to white, the header texts + the selected date texts to white, and the selection color to red:
final themeData = Theme.of(context);
showDateRangePicker(
context: context,
initialDateRange: initialDateRange,
firstDate: firstDate,
lastDate: lastDate,
currentDate: currentDate,
initialEntryMode: initialEntryMode,
helpText: helpText,
cancelText: cancelText,
confirmText: confirmText,
saveText: saveText,
errorFormatText: errorFormatText,
errorInvalidText: errorInvalidText,
errorInvalidRangeText: errorInvalidRangeText,
fieldStartHintText: fieldStartHintText,
fieldEndHintText: fieldEndHintText,
fieldStartLabelText: fieldStartLabelText,
fieldEndLabelText: fieldEndLabelText,
locale: locale,
useRootNavigator: useRootNavigator,
routeSettings: routeSettings,
textDirection: textDirection,
builder: (context, Widget? child) => Theme(
data: themeData.copyWith(
appBarTheme: themeData.appBarTheme.copyWith(
backgroundColor: Colors.blue,
iconTheme: themeData.appBarTheme.iconTheme!.copyWith(color: Colors.white)),
colorScheme: ColorScheme.light(
onPrimary: Colors.white,
primary: Colors.red
)),
child: child!,
));
Upvotes: 6
Reputation: 1204
@Michael Feinstein is right - to elaborate a little bit on what you have to do:
_CalendarRangePickerDialog
and change what you need. For your 6-9 look at _buildDayItem
in the range picker file and the other 2 are also easy to find :-)Now you are all set and good to go.
Upvotes: 3
Reputation: 494
You have could do this in two ways:
Fork a library which has the code to create something similar to this and then edit the code directly and customize how you want
Look for a library which allows more customizing to the date picker, below are a few:
Upvotes: 0
Reputation: 14266
For that level of customization you will need to get the source code, copy it, and then make your own widget modifying that source code.
Upvotes: 1