如何自定义日期选择器

如何自定义日期选择器

我假设你要自定义的日期选择器 不同 ，从你的主旋律。通常，日期选择器遵循您的主题。

如果是这样，请将触发 *** 作的按钮包装在的

Builder

内部

Theme

。例如，这是一个FAB，它会d出一个橙色的日期选择器（在轻材料应用程序主题中），并从主主题继承其余部分。

  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(),    ),  );}