如何自定义日期选择器

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

有制造商提供的参数与showDatePicker（）方法。

尝试这个：

const MaterialColor buttonTextColor = const MaterialColor(
  0xFF4A5BF6,
  const <int, Color>{
    50: const Color(0xFF4A5BF6),
    100: const Color(0xFF4A5BF6),
    200: const Color(0xFF4A5BF6),
    300: const Color(0xFF4A5BF6),
    400: const Color(0xFF4A5BF6),
    500: const Color(0xFF4A5BF6),
    600: const Color(0xFF4A5BF6),
    700: const Color(0xFF4A5BF6),
    800: const Color(0xFF4A5BF6),
    900: const Color(0xFF4A5BF6),
  },
);

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2018),
  lastDate: DateTime(2030),
  builder: (BuildContext context, Widget child) {
    return Theme(
        data: ThemeData.light().copyWith(
          primarySwatch: buttonTextColor,//OK/Cancel button text color
          primaryColor: const Color(0xFF4A5BF6),//Head background
          accentColor: const Color(0xFF4A5BF6)//selection color
          //dialogBackgroundColor: Colors.white,//Background color
           ),     
          child: child,
    );
  },
);

你会得到这样的东西：

Answer 4

只需添加colorScheme: ColorScheme.light(primary: const Color(0xFFed1e25)),在main.dart
它的控制showDatePicker头彩

到 theme: ThemeData()

runApp(
    MaterialApp(
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) => Home(),
      },
      debugShowCheckedModeBanner: false,
      title: 'Hello',
      theme: ThemeData(
        ...
        // CUSTOMIZE showDatePicker Colors
        colorScheme: ColorScheme.light(primary: const Color(0xFFed1e25)),
        buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.primary),
        //
        ...
      ),

Answer 5

颤振 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 6

我假设你要自定义的日期选择器不同，从你的主旋律。通常，日期选择器遵循您的主题。

如果是这样，请将触发操作的按钮包装在的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()),
    ),
  );
}

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

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 7

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

PS：但是在我写这个答案的时候，文本颜色（“OK/CANCEL”）不被接受。这是颤振框架中的一个问题。 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 8

当我在玩 showDatePicker themeData 时，我发现了以下内容：

final DateTime now = DateTime.now();

final DateTime? selectedDate = await showDatePicker(
    context: context,
    initialDate: now,
    firstDate: DateTime(now.year, now.month, now.day),
    lastDate: DateTime(now.year + 2),
    builder: (context, child) {
      return Theme(
        data: ThemeData.dark().copyWith(
            colorScheme: const ColorScheme.dark(
                onPrimary: Colors.black, // selected text color
                onSurface: Colors.amberAccent, // default text color
                primary: Colors.amberAccent // circle color
                ),
            dialogBackgroundColor: Colors.black54,
            textButtonTheme: TextButtonThemeData(
                style: TextButton.styleFrom(
                    textStyle: const TextStyle(
                        color: Colors.amber,
                        fontWeight: FontWeight.normal,
                        fontSize: 12,
                        fontFamily: 'Quicksand'),
                    primary: Colors.amber, // color of button's letters
                    backgroundColor: Colors.black54, // Background color
                    shape: RoundedRectangleBorder(
                        side: const BorderSide(
                            color: Colors.transparent,
                            width: 1,
                            style: BorderStyle.solid),
                        borderRadius: BorderRadius.circular(50))))),
        child: child!,
      );
    });