Flutter如何为date_range_picker插件的DateRangePicker在主题中设置圆角边框
为DateRangePicker设置圆角边框的配置方法
date_range_picker 插件的选择器本质是Dialog弹窗,圆角样式由主题的dialogTheme属性控制,你只需在原有ThemeData中新增对应配置即可,修改后的完整代码如下:
Theme( data: ThemeData( primaryColor: Colors.white, accentColor: Color(0xFF8BC541), accentTextTheme: TextTheme( button: TextStyle( color: Color(0xFF8BC541), ), ), buttonTheme: ButtonThemeData( textTheme: ButtonTextTheme.primary, shape: RoundedRectangleBorder(), ), colorScheme: ColorScheme.light( primary: Color(0xFF8BC541), ), // 新增dialogTheme配置圆角边框 dialogTheme: DialogTheme( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(16), // 可自定义调整圆角数值 ), ), ), child: // 你的业务组件 )
额外说明:
- 调整
BorderRadius.circular的参数即可修改圆角大小,比如设置为8对应小圆角,设置为20对应大圆角。 - 如果是直接调用
showDateRangePicker方法,也可以通过方法的builder参数单独配置主题,写法如下:
showDateRangePicker( context: context, firstDate: DateTime(2020), lastDate: DateTime(2030), initialDateRange: null, builder: (context, child) { return Theme( data: Theme.of(context).copyWith( dialogTheme: DialogTheme( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(16), ), ), // 其余自定义主题参数可放在此处 ), child: child!, ); }, );
内容的提问来源于stack exchange,提问作者Shimaa Yasser
相关产品推荐
相关产品推荐

