how to change date picker selected value color in flutter

Question

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:`

Widget dateOfBirth(String hintText) {
 return Theme(
data: Theme.of(context).copyWith(
  buttonTheme: ButtonThemeData(
      textTheme: ButtonTextTheme
          .accent //Colour of the text in the button "OK/CANCEL"
      ),
),
child: Builder(
  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(() {

          });
        }

        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))),
      ),
    );
  },
),
);}

I assume that you want to customize the date picker differently from your main theme. Normally, date picker follow your main theme. Here is my code for wrapping the page in the theme:

 @override
 Widget build(BuildContext context) {
    [...]
    return new CustomTheme(
       new Scaffold(
          [...]
  )
);}

I want to change date picker selected value color

Answer 1

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;
  });}

Answer 2

You haven't shown us the code where you are attempting the change. You should be able to just change your isLender variable with a setState to get it done (in the parent class that's passing it down).

setState((){
  isLender = true; // or false
});