如何自定义日期选择器
问题内容:
我正在使用该showDatePicker()
方法在flutter应用程序中显示日期选择器。如何自定义日期选择器的颜色?
这是我主题的代码:
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,它会弹出一个橙色的日期选择器(在轻材料应用程序主题中),并从主主题继承其余部分。
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(),
),
);
}