Question

我正在使用showDatePicker()方法在我的flutter应用程序中显示日期选择器。如何自定义日期选择器的颜色？

这是我的主题代码：

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

以下是我在主题中包装页面的代码：

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

Answer 1

除了“确定/取消”按钮外，以上答案均有效。只是添加它，以防有人需要对其进行自定义。它是colorScheme和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,
    );
  },
);

Answer 2

尝试一下

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

Answer 3

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

}, );

Answer 4

我假设您要从主题中自定义日期选择器。通常，日期选择器会遵循您的主题。

如果是这样，请在Builder内的Theme中包含触发操作的按钮。例如，这里有一个弹出橙色日期选择器的FAB（在轻质材料应用主题中），继承主题中的其余部分。

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

检查date_picker.dart的源代码，看看主题的哪些部分会影响日期选择器的不同方面。

如果您只是希望选择器遵循主题，那么这是一个有效的例子

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

如果您想将主题应用于整个应用程序，可以将其最简洁地添加（不需要CustomTheme类）到Material应用程序：

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

Answer 5

非常简单的家伙。您只需添加

main.dart中的

ion-col
它控制showDatePicker标头颜色

到ion-col{ background-color:var(--ion-color-custom-blue); }

colorScheme: ColorScheme.light(primary: const Color(0xFFed1e25)),

Answer 6

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

Answer 7

通过 showDatePicker（）方法可以使用 builder 参数。

尝试一下：

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2018),
  lastDate: DateTime(2030),
  builder: (BuildContext context, Widget child) {
    return Theme(
        data: ThemeData.light().copyWith(
          primaryColor: Colors.red,//Head background
          accentColor: Colors.amber//selection color
          dialogBackgroundColor: Colors.white,//Background color
           ),     
          child: child,
    );
  },
);

Answer 8

如果只想更改datePicker的主题数据，则需要将负责显示datePicker的窗口小部件包装在Builder窗口小部件中，并最终将其全部包装在Theme窗口小部件中，如下所示：

PS：但是在我编写此答案时，不接受文本颜色（“ OK / CANCEL”）。在flutter框架中，这是一个问题。 19623是问题所在。

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

输出

希望这会有所帮助！

Answer 9

<块引用>

如果您在 2021 年更改颜色时仍然面临空安全问题..那么这里是简单的解决方案

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

如何自定义日期选择器

9 个答案: