Flutter Material3下将DateRangePicker样式自定义为DatePicker效果
问题描述
在Flutter的Material3环境下,需要将DateRangePicker的样式自定义为和DatePicker一致的样式。当前DateRangePicker的选中状态辨识度极低,希望让它的背景颜色和DatePicker一样深。查看DateRangePicker源码后发现它内部使用了AppBar,推测头部背景颜色偏浅是问题根源,但不清楚修改方式。
初始调用代码:
await showDateRangePicker( context: context, firstDate: DateTime(1900), lastDate: DateTime.now(), );
解决方法
借助showDateRangePicker的builder参数,嵌套Theme组件覆盖AppBar的主题样式,将AppBar背景色设置为当前主题的主色(colorScheme.primary),以此加深头部背景颜色,实现和DatePicker一致的视觉效果。
可行代码:
await showDateRangePicker( context: context, firstDate: DateTime(1900), lastDate: DateTime.now(), builder: (context, child) { return Theme( data: Theme.of(context).copyWith( appBarTheme: Theme.of(context) .appBarTheme .copyWith( backgroundColor: Theme.of(context) .colorScheme .primary, ), ), child: child!, ); });
内容的提问来源于stack exchange,提问作者DeKekem
相关产品推荐
相关产品推荐

