How to customize a date picker

I assume that you want to customize the date picker differently from your main theme. Normally, date picker follow your main theme.

If so, wrap the button that triggers the action in a Builder inside a Theme. For example, here's a FAB that pops up an orange date picker (in a light material app theme), inheriting the rest from the main theme.

  floatingActionButton: new Theme(
    data: Theme.of(context).copyWith(
          primaryColor: Colors.amber,
        ),
    child: new Builder(
      builder: (context) => new FloatingActionButton(
            child: new Icon(Icons.date_range),
            onPressed: () => showDatePicker(
                  context: context,
                  initialDate: new DateTime.now(),
                  firstDate:
                      new DateTime.now().subtract(new Duration(days: 30)),
                  lastDate: new DateTime.now().add(new Duration(days: 30)),
                ),
          ),
    ),
  ),

Check the source code of date_picker.dart to see which parts of the Theme affect different aspects of the date picker.

If you just want the picker to follow the main theme, here's a working example

import 'package:flutter/material.dart';

class PickerThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: const Text('Picker theme demo')),
      body: new Container(),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.date_range),
        onPressed: () => showDatePicker(
              context: context,
              initialDate: new DateTime.now(),
              firstDate: new DateTime.now().subtract(new Duration(days: 30)),
              lastDate: new DateTime.now().add(new Duration(days: 30)),
            ),
      ),
    );
  }
}

Color hexToColor(int rgb) => new Color(0xFF000000 + rgb);

class CustomTheme extends Theme {
  //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 Color blueDark = hexToColor(0x335C81);
  static Color blueLight = hexToColor(0x74B3CE);
  static Color yellow = hexToColor(0xFCA311);
  static Color red = hexToColor(0xE15554);
  static Color green = hexToColor(0x3BB273);

  CustomTheme(Widget child)
      : super(
          child: child,
          data: new ThemeData(
            primaryColor: blueDark,
            accentColor: yellow,
            cardColor: blueLight,
            backgroundColor: blueDark,
            highlightColor: red,
            splashColor: green,
          ),
        );
}

void main() {
  runApp(
    new MaterialApp(
      home: new CustomTheme(new PickerThemeDemo()),
    ),
  );
}

If you want to apply the theme to the whole app, it can be added most concisely (without the need for the CustomTheme class) to the Material app:

Color hexToColor(int rgb) => new Color(0xFF000000 + rgb);

void main() {
  runApp(
    new MaterialApp(
      theme: new ThemeData(
        brightness: Brightness.light,
        primaryColor: hexToColor(0x335C81),
        accentColor: hexToColor(0xFCA311),
        splashColor: hexToColor(0x3BB273),
      ),
      home: new PickerThemeDemo(),
    ),
  );
} 

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

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

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

enter image description here

Tags:

Dart

Flutter