Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change calendar button color for showDatePicker

Tags:

flutter

I'm using showDatePicker to display a calendar. How do I change the button color and also the today's date background color

enter image description here

I've tried different colors setting in Theme Data. but the OK, Cancel & today's date still in blue

Theme(data: ThemeData(
      splashColor: Color(0xFFFE9BC0),
    )
    child: myWidget(),
);
like image 980
William Avatar asked Jul 02 '19 09:07

William


People also ask

How do I change the date on my picker color?

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. Kindly fine the highlighted code, this is the simplest way to change the colour of your datePicker.


2 Answers

What i did to change the color of the datePicker was:

Theme(
  data: ThemeData(primarySwatch: Colors.red),
  child: myWidget(),
);

Setting an appropriate primarySwatch instead of splashColor will change all the appearance of the picker, this is because a swatch is like a palette of color.
Another thing you could do is set a primarySwatch with a MaterialColor similar to the one you want as main color and then customize the splash color or primary color like this:

Theme(
  data: ThemeData(primarySwatch: Colors.red, splashColor: Colors.green),
  child: myWidget(),
);

Hope it helps!

like image 62
Giorgio Bertolotti Avatar answered Oct 15 '22 16:10

Giorgio Bertolotti


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;
  });}
like image 34
benten Avatar answered Oct 15 '22 17:10

benten