如何自定义日期选择器
我正在使用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(
[...]
)
);
}
9 个答案:
答案 0 :(得分：36)
除了“确定/取消”按钮外，以上答案均有效。只是添加它，以防有人需要对其进行自定义。它是colorScheme和buttonTheme的组合。
showTimePicker(
context: context,
initialTime: TimeOfDay(hour: hour, minute: minute),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.light().copyWith(
primaryColor: const Color(0xFF8CE7F1),
accentColor: const Color(0xFF8CE7F1),
colorScheme: ColorScheme.light(primary: const Color(0xFF8CE7F1)),
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary
),
),
child: child,
);
},
);
答案 1 :(得分：23)
尝试一下
showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(1970),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.dark().copyWith(
colorScheme: ColorScheme.dark(
primary: Colors.deepPurple,
onPrimary: Colors.white,
surface: Colors.pink,
onSurface: Colors.yellow,
),
dialogBackgroundColor:Colors.blue[900],
),
child: child,
);
},
);
答案 2 :(得分：10)
颤振 2.0.2
showDatePicker(
builder: (context, child) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: ColorScheme.light(
primary: Colors.yellow, // header background color
onPrimary: Colors.black, // header text color
onSurface: Colors.green, // body text color
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: Colors.red, // button text color
),
),
),
child: child!,
);
},
);
}, );
答案 3 :(得分：6)
我假设您要从主题中自定义日期选择器 。通常，日期选择器会遵循您的主题。
如果是这样，请在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()),
),
);
}
如果您想将主题应用于整个应用程序，可以将其最简洁地添加（不需要CustomTheme类）到Material应用程序：
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(),
),
);
}
答案 4 :(得分：5)
非常简单的家伙。您只需添加
main.dart中的 ion-col
它控制showDatePicker标头颜色
到ion-col{
background-color:var(--ion-color-custom-blue);
}
colorScheme: ColorScheme.light(primary: const Color(0xFFed1e25)),答案 5 :(得分：3)
**You can try this solution. I sloved my problem apply to this solution**
Future<DateTime> selectDate() async {
return await showDatePicker(
context: context,
initialDatePickerMode: DatePickerMode.day,
initialDate: selecteDate,
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.light().copyWith(
primaryColor: Colors.teal,
accentColor: Colors.teal,
colorScheme: ColorScheme.light(primary: Colors.teal),
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.primary
),
),
child: child,
);
},
firstDate: widget.initialDate ?? DateTime.now().subtract(Duration(days:
30)),
lastDate: widget.lastDate ?? DateTime.now().add(Duration(days: 30)),
);
}
答案 6 :(得分：2)
通过 showDatePicker（）方法可以使用 builder 参数。
尝试一下：
showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(2018),
lastDate: DateTime(2030),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.light().copyWith(
primaryColor: Colors.red,//Head background
accentColor: Colors.amber//selection color
dialogBackgroundColor: Colors.white,//Background color
),
child: child,
);
},
);
答案 7 :(得分：1)
如果只想更改datePicker的主题数据，则需要将负责显示datePicker的窗口小部件包装在Builder窗口小部件中，并最终将其全部包装在Theme窗口小部件中，如下所示：
PS：但是在我编写此答案时，不接受文本颜色（“ OK / CANCEL”）。在flutter框架中，这是一个问题。 19623是问题所在。
Widget dateOfBirth(String hintText){
return Theme(
data: Theme.of(context).copyWith(
primaryColor: Color(0xFFFF3661), //color of the main banner
accentColor: Color(0xFFFF3661), //color of circle indicating the selected date
buttonTheme: ButtonThemeData(
textTheme: ButtonTextTheme.accent //color of the text in the button "OK/CANCEL"
),
),
child: Builder( // This widget is required for the theme to be applied
builder: (context){
return GestureDetector(
onTap: () async {
DateTime initialDate = DateTime(DateTime.now().year - 17,DateTime.now().month,DateTime.now().day);
final picked = await showDatePicker(
context: context,
initialDate: initialDate,
firstDate: DateTime(DateTime.now().year - 100,DateTime.now().month,DateTime.now().day),
lastDate: DateTime(DateTime.now().year - 17,DateTime.now().month,DateTime.now().day),
);
if(picked != null && picked != dobSelected){
setState(() {
dobSelected = picked; // dobSelected is variable to store the selected value
});
}
return picked;
},
child: Padding( //You can use any other widget here
padding: const EdgeInsets.symmetric(horizontal: 40.0),
child: Container(
height: 55,
width: MediaQuery.of(context).size.width,
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(3)),
color: Color(0xFFF2F2F2),
),
padding: const EdgeInsets.symmetric(horizontal: 13),
child: dobSelected == null?Text('Date Of Birth',style: TextStyle(color: widget.isLender?Color(0xFF8B8B8B):Color(0xFFB3B1B1),fontSize: 15),):Text(DateFormat('yyyy-MM-dd').format(dobSelected))
),
),
);
},
),
);
}
输出
希望这会有所帮助！
答案 8 :(得分：0)
<块引用>
如果您在 2021 年更改颜色时仍然面临空安全问题..那么这里是简单的解决方案
Future<void> _selectDate(BuildContext context) async {
DateTime? picked = await showDatePicker(
context: context,
builder: (BuildContext context, Widget ?child) {
return Theme(
data: ThemeData(
primarySwatch: Colors.grey,
splashColor: Colors.black,
textTheme: TextTheme(
subtitle1: TextStyle(color: Colors.black),
button: TextStyle(color: Colors.black),
),
accentColor: Colors.black,
colorScheme: ColorScheme.light(
primary: Color(0xffffbc00),
primaryVariant: Colors.black,
secondaryVariant: Colors.black,
onSecondary: Colors.black,
onPrimary: Colors.white,
surface: Colors.black,
onSurface: Colors.black,
secondary: Colors.black),
dialogBackgroundColor: Colors.white,
),
child: child ??Text(""),
);
}
initialDate: selectedDate,
firstDate: DateTime(1960, 8),
lastDate: DateTime.now());
if (picked != null && picked != selectedDate)
setState(() {
selectedDate = picked;
String da = picked.day.toString() +
"-" +
picked.month.toString() +
"-" +
picked.year.toString();
dateOfBirth.text = da;
});}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？