在flutter中自定义DateRangePicker

Question

我想DateRangePicker在flutter中进行自定义，如何更改以下元素？

1. 将Save按钮更改为图像。
2. 移除Switch to input按钮。
3. 改变header background颜色。
4. 换day name颜色。
5. 换background颜色。
6. 换selected item indicator颜色。
7. 换selected item text颜色。
8. 换selected range indicator颜色。
9. 换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!,
          ));

截屏

Answer 2

@Michael Feinstein 是对的 - 详细说明一下你必须做的事情：

1. 您需要将 date_range_picker_dialog.dart 复制到您的 lib 文件夹中（您可以通过单击 showDateRangePicker() 上的“转到实现”来到达那里
2. 您需要复制calendar_date_range_picker.dart（〜date_range_picker_dialog.dart的第577行是实际选择器小部件作为对话框主体返回的位置）
3. 您需要在这两个文件中进行所需的调整。您的数字 1-3 在对话框中，查看该类_CalendarRangePickerDialog并更改您需要的内容。对于您的 6-9，请查看_buildDayItem范围选择器文件，其他 2 个也很容易找到:-)
4. 不要忘记更改 date_range_picker_dialog.dart 副本中的导入，以便导入 date_range_picker.dart 的副本，而不是原始副本。

现在一切准备就绪，可以开始了。