flutter - 在 flutter 中自定义 DateRangePicker

Question

我要定制DateRangePicker在 flutter 中，如何更改以下元素？

更改 Save按钮图像。

删除 Switch to input按钮。

更改 header background颜色。

更改 day name颜色。

更改 background颜色。

更改 selected item indicator颜色。

更改 selected item text颜色。

更改 selected range indicator颜色。

更改 selected range text颜色。

showDateRangePicker(
  context: context,
  firstDate: DateTime.now(),
  lastDate: DateTime.now().add(Duration(days: 100)),
  builder: (BuildContext context, Widget child) {
    return Theme(
      data: ThemeData(
        ...
      ),
      child: child,
    );
  },
);

Answer 1

正如其他人之前所说，这些事情中的大多数只能通过修改源来改变。
您可以通过在 showDateRangePicker 的构建器回调中应用 appBarTheme 来更改标题背景颜色。
文本颜色和选择颜色也可以通过应用主题来设置，需要使用 ColorScheme 来设置。
本示例将标题背景设置为蓝色，关闭图标设置为白色，标题文本 + 所选日期文本设置为白色，选择颜色设置为红色:

final themeData = Theme.of(context);
showDateRangePicker(
      context: context,
      initialDateRange: initialDateRange,
      firstDate: firstDate,
      lastDate: lastDate,
      currentDate: currentDate,
      initialEntryMode: initialEntryMode,
      helpText: helpText,
      cancelText: cancelText,
      confirmText: confirmText,
      saveText: saveText,
      errorFormatText: errorFormatText,
      errorInvalidText: errorInvalidText,
      errorInvalidRangeText: errorInvalidRangeText,
      fieldStartHintText: fieldStartHintText,
      fieldEndHintText: fieldEndHintText,
      fieldStartLabelText: fieldStartLabelText,
      fieldEndLabelText: fieldEndLabelText,
      locale: locale,
      useRootNavigator: useRootNavigator,
      routeSettings: routeSettings,
      textDirection: textDirection,
      builder: (context, Widget? child) => Theme(
            data: themeData.copyWith(
                appBarTheme: themeData.appBarTheme.copyWith(
                    backgroundColor: Colors.blue,
                    iconTheme: themeData.appBarTheme.iconTheme!.copyWith(color: Colors.white)),
                colorScheme: ColorScheme.light(
                  onPrimary: Colors.white,
                  primary: Colors.red
                )),
            child: child!,
          ));

Screenshot