Flutter Material3中自定义showDatePicker的颜色与日期文本格式

一、自定义日期显示格式（如“Seg, 17 de jul.”） #

要实现葡萄牙语风格的缩写日期格式，需通过自定义本地化代理覆盖日期格式化逻辑：

1. 自定义日期本地化类 #

创建继承自MaterialLocalizations的类，重写日期格式化方法：

class CustomPtBrDatePickerLocalizations extends MaterialLocalizations {
  final Locale locale;

  CustomPtBrDatePickerLocalizations(this.locale);

  static CustomPtBrDatePickerLocalizations of(BuildContext context) {
    return Localizations.of<CustomPtBrDatePickerLocalizations>(
      context,
      CustomPtBrDatePickerLocalizations,
    )!;
  }

  static const LocalizationsDelegate<CustomPtBrDatePickerLocalizations> delegate =
      _CustomPtBrDatePickerLocalizationsDelegate();

  // 重写日历头部的日期显示格式
  @override
  String formatCompactDate(DateTime date) {
    final weekday = _getWeekdayAbbr(date.weekday);
    final day = date.day.toString();
    final month = _getMonthAbbr(date.month);
    return "$weekday, $day de $month.";
  }

  // 葡萄牙语星期缩写映射
  String _getWeekdayAbbr(int weekday) {
    switch (weekday) {
      case DateTime.monday: return "Seg";
      case DateTime.tuesday: return "Ter";
      case DateTime.wednesday: return "Qua";
      case DateTime.thursday: return "Qui";
      case DateTime.friday: return "Sex";
      case DateTime.saturday: return "Sáb";
      case DateTime.sunday: return "Dom";
      default: return "";
    }
  }

  // 葡萄牙语月份缩写映射
  String _getMonthAbbr(int month) {
    switch (month) {
      case 1: return "jan";
      case 2: return "fev";
      case 3: return "mar";
      case 4: return "abr";
      case 5: return "mai";
      case 6: return "jun";
      case 7: return "jul";
      case 8: return "ago";
      case 9: return "set";
      case 10: return "out";
      case 11: return "nov";
      case 12: return "dez";
      default: return "";
    }
  }

  // 补充必要的本地化文本
  @override
  String get datePickerInputLabelText => "Selecione a data";
  @override
  String get cancelButtonLabel => "Cancelar";
  @override
  String get confirmButtonLabel => "Confirmar";
  @override
  String get datePickerHelpText => "Selecione uma data";
  // 其他未列出的方法可参考默认MaterialLocalizations实现补充
}

// 本地化代理类
class _CustomPtBrDatePickerLocalizationsDelegate
    extends LocalizationsDelegate<CustomPtBrDatePickerLocalizations> {
  const _CustomPtBrDatePickerLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) => locale.languageCode == 'pt';

  @override
  Future<CustomPtBrDatePickerLocalizations> load(Locale locale) {
    return SynchronousFuture<CustomPtBrDatePickerLocalizations>(
      CustomPtBrDatePickerLocalizations(locale),
    );
  }

  @override
  bool shouldReload(_CustomPtBrDatePickerLocalizationsDelegate old) => false;
}

2. 注册本地化代理 #

在MaterialApp中添加自定义代理：

MaterialApp(
  localizationsDelegates: const [
    CustomPtBrDatePickerLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: const [Locale('pt', 'BR')],
  // 其他配置
)

二、Material3下自定义组件颜色与文本样式 #

可通过全局主题或局部调用两种方式定制样式：

1. 全局主题配置 #

在ThemeData中通过datePickerTheme统一设置：

ThemeData(
  useMaterial3: true,
  datePickerTheme: DatePickerThemeData(
    // 整体背景色
    backgroundColor: Colors.grey[50],
    // 头部样式
    headerBackgroundColor: Colors.blueAccent,
    headerForegroundColor: Colors.white,
    headerHeadlineStyle: const TextStyle(
      fontSize: 18,
      fontWeight: FontWeight.w600,
    ),
    // 普通日期文本样式
    dayStyle: const TextStyle(
      color: Colors.black87,
      fontSize: 14,
    ),
    // 选中日期样式
    selectedBackgroundColor: Colors.blueAccent,
    selectedDayStyle: const TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.w600,
    ),
    // 按钮样式
    confirmButtonStyle: TextButton.styleFrom(
      foregroundColor: Colors.blueAccent,
      textStyle: const TextStyle(fontWeight: FontWeight.w600),
    ),
  ),
)

2. 局部样式覆盖 #

仅针对单个showDatePicker修改样式：

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2020),
  lastDate: DateTime(2030),
  theme: Theme.of(context).copyWith(
    useMaterial3: true,
    datePickerTheme: const DatePickerThemeData(
      headerBackgroundColor: Colors.purpleAccent,
      selectedBackgroundColor: Colors.purpleAccent,
    ),
  ),
);

三、完整示例 #

将上述代码整合，即可实现同时满足日期格式定制与Material3样式自定义的效果。

内容的提问来源于stack exchange，提问作者Igor Pereira