更改 Cupertino 日期选择器的文本颜色答案

【问题标题】：Changing The Text Color Of Cupertino Date Picker更改 Cupertino 日期选择器的文本颜色
【发布时间】：2021-08-07 07:37:27
【问题描述】：

下面附上我当前更改 CupertinoDatePicker 文本颜色的代码：

Container(
                decoration:
                    BoxDecoration(borderRadius: BorderRadius.circular(12)),
                height: MediaQuery.of(context).size.height * 0.18,
                child: CupertinoTheme(
                  data: CupertinoThemeData(
                    textTheme: CupertinoTextThemeData(
                        pickerTextStyle: TextStyle(
                      color: Color(0xffB59CCF),
                    )),
                  ),
                  child: CupertinoDatePicker(

但是颜色并没有改变，如下图：

我在 main.dart 中的主题如下：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText1: TextStyle(),
          bodyText2: TextStyle(),
        ).apply(
            bodyColor: Colors.white.withOpacity(0.87),
            displayColor: Colors.white.withOpacity(0.87)),
        primaryColor: Colors.white,
        secondaryHeaderColor: Colors.white.withOpacity(0.60),
        backgroundColor: Color(0xff111016),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
              padding: EdgeInsets.all(15),
              shape: CircleBorder(),
              elevation: 6,
              onPrimary: Color(0xff04072E),
              primary: Colors.yellow[100],
              textStyle: TextStyle(fontSize: 21)),
        ),

我不确定是什么原因导致 CupertinoDatePicker 的文本颜色为黑色，但我希望它改变颜色。任何帮助表示赞赏！谢谢！

改成dateTimePickerTextStyle后，出现如下情况：

【问题讨论】：

标签： flutter date flutter-cupertino

【解决方案1】：

你要找的是

dateTimePickerTextStyle: TextStyle(color: Colors.white),

此属性是CupertinoTextThemeData 的一部分。

所以你的代码应该是这样的，

CupertinoTheme(
  data: CupertinoThemeData(
    textTheme: CupertinoTextThemeData(
      dateTimePickerTextStyle: TextStyle(color: Colors.white),
    ),
  ),
  child: CupertinoDatePicker(
    onDateTimeChanged: (_) {},
  ),
)

来自官方文档，

内容文本以 CupertinoTextThemeData.dateTimePickerTextStyle 显示。

【讨论】：

嗨 Nisanth，我们又见面了，谢谢你。颜色确实变了。但现在一切似乎都塞满了 tgt。我把照片放在上面了。
你好。这一定是由于其他一些父母给了它一些限制，或者由于您在MaterialApp 中定义的主题。尝试将它们一一移除，并检查它何时恢复正常。我只是使用了我在答案中给出的代码，一切都很宽敞。
知道了 Nisanth，我在 dateTimePickerTextStyle 中更改了字体大小

【解决方案2】：

使用dateTimePickerTextStyle 而不是pickerTextStyle

这是工作代码

          CupertinoTheme(
            data: CupertinoThemeData(
              textTheme: CupertinoTextThemeData(
                dateTimePickerTextStyle: TextStyle(
                  color: Colors.red,
                ),
              ),
            ),
            child: CupertinoDatePicker(
              minimumDate: DateTime.now(),
              minuteInterval: 1,
              mode: CupertinoDatePickerMode.dateAndTime,
              onDateTimeChanged: (DateTime dateTime) {
                print("dateTime: ${dateTime}");
              },
            ),
          );

请参考CupertinoTextThemeData

【讨论】：

【解决方案3】：

            return CupertinoTheme(
                        data: CupertinoThemeData(
                          brightness: Brightness.dark,
                        ),
                        child: Container(
                          height: 200,
                          child: CupertinoDatePicker(
                              backgroundColor: darkColor,
                              initialDateTime: DateTime.now(),
                              maximumDate: new DateTime(2050, 12, 30),
                              minimumYear: 2010,
                              maximumYear: 3000,
                              minuteInterval: 1,
                              mode: CupertinoDatePickerMode.date,
                              use24hFormat: true,
                              onDateTimeChanged: (DateTime newdate) {
                                print(newdate);
                                setState(() {
                                  tanggalController.text =
                                      newdate.formatDateView();
                                });
                              }),
                        ),
                      );

【讨论】：