I would like the customize the DateRangePicker in flutter to look like the DatePicker. I am using material 3:
screenshot of DateRangePicker:
Basically in the DateRangePicker you can barely see your selection. I want the background to be as dark as in the DatePicker. A look at the source code of DateRangePicker reveals that it uses a app bar. I suspect this is the cause of the light color in the header background. But I don't know change that.
This is my code to show the date range picker:
await showDateRangePicker(
context: context,
firstDate: DateTime(1900),
lastDate: DateTime.now(),
);
I manage to achieve what I want thanks to the help of @Rohan Jariwala. This is what works for me:
await showDateRangePicker(
context: context,
firstDate: DateTime(1900),
lastDate: DateTime.now(),
builder: (context, child) {
return Theme(
data: Theme.of(context).copyWith(
appBarTheme: Theme.of(context)
.appBarTheme
.copyWith(
backgroundColor:
Theme.of(context)
.colorScheme
.primary,
),
),
child: child!,
);
});
You can add builder in showDateRangePicker
in following way
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!,
));
I've added colours to the appBar and colorScheme. You can change those colours.