'How to customize a date picker
I’m using the showDatePicker() method to display a date picker in my flutter application. How do I customize the colors of the date picker?
Here is my theme's code:
class CustomTheme extends Theme {
/*
* Colors:
* Primary Blue: #335C81 (51, 92, 129)
* Light Blue: #74B3CE (116, 179, 206)
* Yellow: #FCA311 (252, 163, 17)
* Red: #E15554 (255, 85, 84)
* Green: #3BB273 (59, 178, 115)
*/
static int _fullAlpha = 255;
static Color blueDark = new Color.fromARGB(_fullAlpha, 51, 92, 129);
static Color blueLight = new Color.fromARGB(_fullAlpha, 116, 179, 206);
static Color yellow = new Color.fromARGB(_fullAlpha, 252, 163, 17);
static Color red = new Color.fromARGB(_fullAlpha, 255, 85, 84);
static Color green = new Color.fromARGB(_fullAlpha, 59, 178, 115);
static Color activeIconColor = yellow;
CustomTheme(Widget child): super(
child: child,
data: new ThemeData(
primaryColor: blueDark,
accentColor: yellow,
cardColor: blueLight,
backgroundColor: blueDark,
highlightColor: red,
splashColor: green
)
);
}
Here is my code for wrapping the page in the theme:
@override
Widget build(BuildContext context) {
[...]
return new CustomTheme(
new Scaffold(
[...]
)
);
}
Solution 1:[1]
The above answers are working except for the Ok/Cancel buttons. Just adding this in case somebody needs help on customizing it. It is a combination of colorScheme and buttonTheme.
showTimePicker(
context: context,
initialTime: TimeOfDay(hour: hour, minute: minute),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.light().copyWith(
primaryColor: const Color(0xFF8CE7F1),
accentColor: const Color(0xFF8CE7F1),
colorScheme: ColorScheme.light(primary: const Color(0xFF8CE7F1)),
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary
),
),
child: child,
);
},
);
Solution 2:[2]
Flutter 2.0.2
showDatePicker(
builder: (context, child) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: ColorScheme.light(
primary: Colors.yellow, // header background color
onPrimary: Colors.black, // header text color
onSurface: Colors.green, // body text color
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: Colors.red, // button text color
),
),
),
child: child!,
);
},
);
},
);
Solution 3:[3]
Try this
showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(1970),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.dark().copyWith(
colorScheme: ColorScheme.dark(
primary: Colors.deepPurple,
onPrimary: Colors.white,
surface: Colors.pink,
onSurface: Colors.yellow,
),
dialogBackgroundColor:Colors.blue[900],
),
child: child,
);
},
);
Solution 4:[4]
Just add colorScheme: ColorScheme.light(primary: const Color(0xFFed1e25)), in main.dart
it's controls showDatePicker header color
to theme: ThemeData()
runApp(
MaterialApp(
...
theme: ThemeData(
...
// CUSTOMIZE showDatePicker Colors
colorScheme: ColorScheme.light(primary: const Color(0xFFed1e25)),
buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.primary),
//
...
),
Solution 5:[5]
There is builder parameter available with showDatePicker() method.
try this:
const MaterialColor buttonTextColor = const MaterialColor(
0xFF4A5BF6,
const <int, Color>{
50: const Color(0xFF4A5BF6),
100: const Color(0xFF4A5BF6),
200: const Color(0xFF4A5BF6),
300: const Color(0xFF4A5BF6),
400: const Color(0xFF4A5BF6),
500: const Color(0xFF4A5BF6),
600: const Color(0xFF4A5BF6),
700: const Color(0xFF4A5BF6),
800: const Color(0xFF4A5BF6),
900: const Color(0xFF4A5BF6),
},
);
showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2018),
lastDate: DateTime(2030),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.light().copyWith(
primarySwatch: buttonTextColor,//OK/Cancel button text color
primaryColor: const Color(0xFF4A5BF6),//Head background
accentColor: const Color(0xFF4A5BF6)//selection color
//dialogBackgroundColor: Colors.white,//Background color
),
child: child,
);
},
);
and you will get something like this:
Solution 6:[6]
If you only want to change the theme data for the datePicker you need to wrap the widget responsible for showing the datePicker inside a Builder widget and ultimately wrap it all inside a Theme widget as shown below:
PS: But at the time I was writing this answer, the text color ("OK/CANCEL") was not accepted. It is a issue in the flutter framework. 19623 is the issue.
Widget dateOfBirth(String hintText){
return Theme(
data: Theme.of(context).copyWith(
primaryColor: Color(0xFFFF3661), //color of the main banner
accentColor: Color(0xFFFF3661), //color of circle indicating the selected date
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.accent //color of the text in the button "OK/CANCEL"
),
),
child: Builder( // This widget is required for the theme to be applied
builder: (context){
return GestureDetector(
onTap: () async {
DateTime initialDate = DateTime(DateTime.now().year - 17,DateTime.now().month,DateTime.now().day);
final picked = await showDatePicker(
context: context,
initialDate: initialDate,
firstDate: DateTime(DateTime.now().year - 100,DateTime.now().month,DateTime.now().day),
lastDate: DateTime(DateTime.now().year - 17,DateTime.now().month,DateTime.now().day),
);
if(picked != null && picked != dobSelected){
setState(() {
dobSelected = picked; // dobSelected is variable to store the selected value
});
}
return picked;
},
child: Padding( //You can use any other widget here
padding: const EdgeInsets.symmetric(horizontal: 40.0),
child: Container(
height: 55,
width: MediaQuery.of(context).size.width,
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(3)),
color: Color(0xFFF2F2F2),
),
padding: const EdgeInsets.symmetric(horizontal: 13),
child: dobSelected == null?Text('Date Of Birth',style: TextStyle(color: widget.isLender?Color(0xFF8B8B8B):Color(0xFFB3B1B1),fontSize: 15),):Text(DateFormat('yyyy-MM-dd').format(dobSelected))
),
),
);
},
),
);
}
Output
Hope this helps!!!
Solution 7:[7]
**You can try this solution. I sloved my problem apply to this solution**
Future<DateTime> selectDate() async {
return await showDatePicker(
context: context,
initialDatePickerMode: DatePickerMode.day,
initialDate: selecteDate,
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.light().copyWith(
primaryColor: Colors.teal,
accentColor: Colors.teal,
colorScheme: ColorScheme.light(primary: Colors.teal),
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary
),
),
child: child,
);
},
firstDate: widget.initialDate ?? DateTime.now().subtract(Duration(days:
30)),
lastDate: widget.lastDate ?? DateTime.now().add(Duration(days: 30)),
);
}
Solution 8:[8]
While I was playing around with the showDatePicker themeData, I found the following:
final DateTime now = DateTime.now();
final DateTime? selectedDate = await showDatePicker(
context: context,
initialDate: now,
firstDate: DateTime(now.year, now.month, now.day),
lastDate: DateTime(now.year + 2),
builder: (context, child) {
return Theme(
data: ThemeData.dark().copyWith(
colorScheme: const ColorScheme.dark(
onPrimary: Colors.black, // selected text color
onSurface: Colors.amberAccent, // default text color
primary: Colors.amberAccent // circle color
),
dialogBackgroundColor: Colors.black54,
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
textStyle: const TextStyle(
color: Colors.amber,
fontWeight: FontWeight.normal,
fontSize: 12,
fontFamily: 'Quicksand'),
primary: Colors.amber, // color of button's letters
backgroundColor: Colors.black54, // Background color
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.transparent,
width: 1,
style: BorderStyle.solid),
borderRadius: BorderRadius.circular(50))))),
child: child!,
);
});
Solution 9:[9]
If you still face null safety problem in changing color in 2021 ..then here is the simeple solution
Future<void> _selectDate(BuildContext context) async {
DateTime? picked = await showDatePicker(
context: context,
builder: (BuildContext context, Widget ?child) {
return Theme(
data: ThemeData(
primarySwatch: Colors.grey,
splashColor: Colors.black,
textTheme: TextTheme(
subtitle1: TextStyle(color: Colors.black),
button: TextStyle(color: Colors.black),
),
accentColor: Colors.black,
colorScheme: ColorScheme.light(
primary: Color(0xffffbc00),
primaryVariant: Colors.black,
secondaryVariant: Colors.black,
onSecondary: Colors.black,
onPrimary: Colors.white,
surface: Colors.black,
onSurface: Colors.black,
secondary: Colors.black),
dialogBackgroundColor: Colors.white,
),
child: child ??Text(""),
);
}
initialDate: selectedDate,
firstDate: DateTime(1960, 8),
lastDate: DateTime.now());
if (picked != null && picked != selectedDate)
setState(() {
selectedDate = picked;
String da = picked.day.toString() +
"-" +
picked.month.toString() +
"-" +
picked.year.toString();
dateOfBirth.text = da;
});}
Solution 10:[10]
Update from 2021
Flutter 2.5.3
showDatePicker(
context: context,
builder: (context, child) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: ColorScheme.light(
primary: Colors.blue,
onPrimary: Colors.white,
onSurface: Colors.black,
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.blue,
textStyle: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
),
child: child!,
);
},
helpText: 'Select Date',
initialDate: _selectedDate,
firstDate: DateTime.now(),
lastDate: DateTime.now().add(Duration(days: 14)),
).then((pickedDate) {
if (pickedDate == null) {
return;
}
setState(() {
_selectedDate = pickedDate;
_date.value = TextEditingValue(
text: DateFormat('dd-MM-yyyy').format(_selectedDate));
});
});
Solution 11:[11]
The flutter's original CalendarDatePicker only allows limited customisations by wrapping the CalendarDatePicker with Theme.
I have created a highly customisable date picker based on Flutter's CalendarDatePicker, which supports single, multi and range three different modes and all of them allows highly customisations. If anybody wants a date picker without header, or change the weekday labels, colors andetc. you can try: calendar_date_picker2
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow