我正在使用该showDatePicker()方法在flutter应用程序中显示日期选择器。如何自定义日期选择器的颜色?
showDatePicker()
这是我主题的代码:
class CustomTheme extends Theme { /* * Colors: * Primary Blue: #335C81 (51, 92, 129) * Light Blue: #74B3CE (116, 179, 206) * Yellow: #FCA311 (252, 163, 17) * Red: #E15554 (255, 85, 84) * Green: #3BB273 (59, 178, 115) */ static int _fullAlpha = 255; static Color blueDark = new Color.fromARGB(_fullAlpha, 51, 92, 129); static Color blueLight = new Color.fromARGB(_fullAlpha, 116, 179, 206); static Color yellow = new Color.fromARGB(_fullAlpha, 252, 163, 17); static Color red = new Color.fromARGB(_fullAlpha, 255, 85, 84); static Color green = new Color.fromARGB(_fullAlpha, 59, 178, 115); static Color activeIconColor = yellow; CustomTheme(Widget child): super( child: child, data: new ThemeData( primaryColor: blueDark, accentColor: yellow, cardColor: blueLight, backgroundColor: blueDark, highlightColor: red, splashColor: green ) ); }
这是我将页面包装在主题中的代码:
@override Widget build(BuildContext context) { [...] return new CustomTheme( new Scaffold( [...] ) ); }
我假设你要自定义的日期选择器 不同 ,从你的主旋律。通常,日期选择器遵循您的主题。
如果是这样,请将触发操作的按钮包装在的Builder内部Theme。例如,这是一个FAB,它会弹出一个橙色的日期选择器(在轻材料应用程序主题中),并从主主题继承其余部分。
Builder
Theme
floatingActionButton: new Theme( data: Theme.of(context).copyWith( primaryColor: Colors.amber, ), child: new Builder( builder: (context) => new FloatingActionButton( child: new Icon(Icons.date_range), onPressed: () => showDatePicker( context: context, initialDate: new DateTime.now(), firstDate: new DateTime.now().subtract(new Duration(days: 30)), lastDate: new DateTime.now().add(new Duration(days: 30)), ), ), ), ),
检查date_picker.dart的源代码以查看主题的哪些部分会影响日期选择器的不同方面。
如果您只是想让选择器遵循主题,这是一个工作示例
import 'package:flutter/material.dart'; class PickerThemeDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: const Text('Picker theme demo')), body: new Container(), floatingActionButton: new FloatingActionButton( child: new Icon(Icons.date_range), onPressed: () => showDatePicker( context: context, initialDate: new DateTime.now(), firstDate: new DateTime.now().subtract(new Duration(days: 30)), lastDate: new DateTime.now().add(new Duration(days: 30)), ), ), ); } } Color hexToColor(int rgb) => new Color(0xFF000000 + rgb); class CustomTheme extends Theme { //Primary Blue: #335C81 (51, 92, 129) //Light Blue: #74B3CE (116, 179, 206) //Yellow: #FCA311 (252, 163, 17) //Red: #E15554 (255, 85, 84) //Green: #3BB273 (59, 178, 115) static Color blueDark = hexToColor(0x335C81); static Color blueLight = hexToColor(0x74B3CE); static Color yellow = hexToColor(0xFCA311); static Color red = hexToColor(0xE15554); static Color green = hexToColor(0x3BB273); CustomTheme(Widget child) : super( child: child, data: new ThemeData( primaryColor: blueDark, accentColor: yellow, cardColor: blueLight, backgroundColor: blueDark, highlightColor: red, splashColor: green, ), ); } void main() { runApp( new MaterialApp( home: new CustomTheme(new PickerThemeDemo()), ), ); }
如果要将主题应用于整个应用程序,则可以将其最简洁地添加到Material应用程序中(无需CustomTheme类):
Color hexToColor(int rgb) => new Color(0xFF000000 + rgb); void main() { runApp( new MaterialApp( theme: new ThemeData( brightness: Brightness.light, primaryColor: hexToColor(0x335C81), accentColor: hexToColor(0xFCA311), splashColor: hexToColor(0x3BB273), ), home: new PickerThemeDemo(), ), ); }