Flutter中如何移除日期范围选择器内的‘Select range’、‘start date’和‘end date’文本

嘿，我来帮你搞定这个问题！完全不用换第三方包就能实现，咱们可以通过修改系统本地化配置来隐藏这些文本，或者如果是用了第三方组件的话也有直接的参数可以调，具体给你说两种可行的方案：

方案一：修改系统日期范围选择器的本地化文本（推荐） #

Flutter自带的showDateRangePicker里的这些提示文本，其实是来自Material本地化字符串的。咱们可以自定义一个本地化代理，把对应的文本置为空字符串，就能达到隐藏的效果：

首先创建一个自定义的本地化类和代理：

class CustomMaterialLocalizations extends DefaultMaterialLocalizations {
  const CustomMaterialLocalizations() : super(const Locale('en'));

  // 把这三个文本设为空，就不会显示了
  @override
  String get dateRangePickerHelpText => ''; // 对应"Select range"
  @override
  String get dateRangePickerStartLabelText => ''; // 对应"Start date"
  @override
  String get dateRangePickerEndLabelText => ''; // 对应"End date"
}

class CustomLocalizationDelegate extends LocalizationsDelegate<MaterialLocalizations> {
  const CustomLocalizationDelegate();

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

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

  @override
  bool shouldReload(covariant LocalizationsDelegate<MaterialLocalizations> old) => false;
}

然后在你的MaterialApp里配置这个自定义代理：

MaterialApp(
  localizationsDelegates: const [
    CustomLocalizationDelegate(),
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  // 其他页面、主题等配置...
)

这样再调用showDateRangePicker的时候，顶部那三个文本就会消失啦。

方案二：如果用了第三方日期选择器组件 #

如果你用的是比如syncfusion_flutter_datepicker这类第三方包，通常组件本身会提供直接隐藏头部文本的参数。比如Syncfusion的组件可以设置headerText为空，或者通过showHeader属性设为false来隐藏整个头部区域，具体可以看组件的官方文档找对应的配置项。

小提示 #

如果你觉得自定义本地化有点繁琐，也可以用Stack布局把选择器包起来，用一个和背景色相同的容器盖住顶部文本区域，但这种方法属于临时hack，不如本地化方案优雅，不太推荐长期使用。

备注：内容来源于stack exchange，提问作者VISHNU PRABHAKARAN