Flutter中如何单独修改showDatePicker手动输入框的文字颜色?
解决showDatePicker手动输入框文字颜色单独修改问题
你当前代码只配置了InputDecorationTheme的提示文字和标签文字样式,但手动输入的实际文本颜色是由textStyle控制的,这就是配置未生效的核心原因。以下是修改后的完整方案:
调整后的主题配置代码
final inputDecorationTheme = InputDecorationTheme( contentPadding: const EdgeInsets.symmetric(horizontal: 22, vertical: 14), filled: true, fillColor: Colors.white.withOpacity(0.1), hintStyle: textTheme.labelMedium!.apply(color: Palette.darkGrey), floatingLabelBehavior: FloatingLabelBehavior.never, labelStyle: const TextStyle(color: Colors.white), // 新增:设置手动输入的文本颜色,替换成你需要的颜色值 textStyle: const TextStyle(color: Colors.black), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Palette.border, width: 1)), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Palette.border, width: 1)), border: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Palette.border, width: 1)), errorBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Palette.error, width: 1)), ); final datePickerTheme = DatePickerThemeData( cancelButtonStyle: TextButton.styleFrom( foregroundColor: Colors.black, ), confirmButtonStyle: TextButton.styleFrom( foregroundColor: Palette.primary, ), inputDecorationTheme: inputDecorationTheme, );
调用showDatePicker时应用主题
必须通过builder参数单独为日期选择器套入自定义主题,避免影响全局样式:
showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime(2000), lastDate: DateTime(2100), builder: (context, child) { return Theme( data: Theme.of(context).copyWith(datePickerTheme: datePickerTheme), child: child!, ); }, );
核心说明
InputDecorationTheme的textStyle才是控制输入框内已输入文本的样式,你之前遗漏了这个关键配置项。- 通过
builder参数局部覆盖主题,完全不会改动全局主题配置,精准满足你的需求。
内容的提问来源于stack exchange,提问作者Apple
相关产品推荐
相关产品推荐

