在 flutter 中自定义 DateRangePicker

Question

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

将 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

对于该级别的自定义，您需要获取源代码，复制它，然后制作您自己的小部件修改该源代码。

Answer 2

您可以通过两种方式做到这一点：

分叉一个库，其中包含创建与此类似的代码的库，然后直接编辑代码并自定义您想要的方式
寻找一个允许对日期选择器进行更多自定义的库，下面是几个：

Answer 3

@Michael Feinstein 是对的 - 详细说明你必须做什么：

您需要将 date_range_picker_dialog.dart 复制到您的 lib 文件夹中（您可以通过在 showDateRangePicker()
您需要复制 calendar_date_range_picker.dart（~ date_range_picker_dialog.dart 的第 577 行是实际选择器小部件作为对话框主体返回的地方）
您需要在两个文件中进行您想要的调整。您的数字 1-3 在对话框中，查看 class _CalendarRangePickerDialog 并更改您需要的内容。对于 6-9 岁，请查看范围选择器文件中的 _buildDayItem，其他 2 个也很容易找到 :-)
不要忘记更改 date_range_picker_dialog.dart 副本中的导入，以便导入 date_range_picker.dart 副本，而不是原始副本。

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

Answer 4

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

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

Answer 5

我在下面复制了如何更改您在颜色自定义方面询问的几乎所有内容：

showDateRangePicker(
  context: context,
  firstDate: DateTime.now(),
  lastDate: DateTime.now().add(Duration(days: 100)),
  builder: (BuildContext context, Widget child) {
          return Theme(
            data: ThemeData.light().copyWith(
              //Header background color
              primaryColor: Colors.blue,
              //Background color
              scaffoldBackgroundColor: Colors.grey[50],
              //Divider color
              dividerColor: Colors.grey,
              //Non selected days of the month color
              textTheme: TextTheme(
                bodyText2:
                    TextStyle(color: Colors.black),
              ),
              colorScheme: ColorScheme.fromSwatch().copyWith(
                //Selected dates background color
                primary: Colors.blue,
                //Month title and week days color
                onSurface: Colors.black,
                //Header elements and selected dates text color
                //onPrimary: Colors.white,
              ),
            ),
            child: child,
          );
        }
);

Answer 6

我创建了一个包 calendar_date_picker2 支持 high-level 自定义，只需将其包装在容器中并将容器颜色设置为背景颜色即可。

在 flutter 中自定义 DateRangePicker

Customize DateRangePicker in flutter

flutter

flutter-date-range-picker