Flutter内置组件中如何将月份和星期首字母大写？

核心思路 #

Flutter默认的西语、葡语本地化资源里，月份和星期名称是小写的。要实现句首大写的需求，推荐通过自定义本地化委托覆盖对应日期字符串，这种方案无需修改第三方包，稳定性更强。

具体实现步骤 #

1. 创建自定义本地化类，继承DefaultMaterialLocalizations并覆盖日期相关方法：

class CustomMaterialLocalizations extends DefaultMaterialLocalizations {
  CustomMaterialLocalizations(Locale locale) : super(locale);

  static const LocalizationsDelegate<MaterialLocalizations> delegate = _CustomMaterialLocalizationsDelegate();

  // 覆盖月份名称，首字母大写
  @override
  String getMonthName(DateTime date) {
    String month = super.getMonthName(date);
    return _capitalizeFirstLetter(month);
  }

  // 覆盖星期缩写，首字母大写
  @override
  String getWeekdayName(Weekday weekday) {
    String weekdayName = super.getWeekdayName(weekday);
    return _capitalizeFirstLetter(weekdayName);
  }

  // 覆盖完整星期名称（按需启用）
  @override
  String getFullWeekdayName(Weekday weekday) {
    String fullWeekday = super.getFullWeekdayName(weekday);
    return _capitalizeFirstLetter(fullWeekday);
  }

  // 首字母大写工具方法
  String _capitalizeFirstLetter(String text) {
    if (text.isEmpty) return text;
    return text[0].toUpperCase() + text.substring(1);
  }
}

// 自定义本地化委托类
class _CustomMaterialLocalizationsDelegate extends LocalizationsDelegate<MaterialLocalizations> {
  const _CustomMaterialLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    // 仅对西语、葡语生效，其他语言沿用默认逻辑
    return ['es', 'pt'].contains(locale.languageCode);
  }

  @override
  Future<MaterialLocalizations> load(Locale locale) {
    return SynchronousFuture<MaterialLocalizations>(CustomMaterialLocalizations(locale));
  }

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

2. 在MaterialApp的localizationsDelegates中添加自定义委托（需放在默认委托之前，保证优先生效）：

MaterialApp(
  localizationsDelegates: const [
    CustomMaterialLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: const [
    Locale('en'),
    Locale('es'),
    Locale('pt'),
  ],
  // 其他配置项...
)

3. 原有showDatePicker调用代码无需修改，会自动使用自定义本地化资源：

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime.now().subtract(const Duration(days: 50)),
  lastDate: DateTime.now().add(const Duration(days: 50)),
);

补充说明 #

• 若需针对特定地区葡语（如巴西葡语pt_BR）做细分调整，可在isSupported方法中判断locale.toString()，并在首字母大写方法中适配对应规则。
• 该方案仅影响西语和葡语的日期显示，其他语言本地化表现不受干扰。

内容的提问来源于stack exchange，提问作者João Nilson