[英]How to customize a TimePicker widget in Flutter
showTimePicker(
context: context,
initialTime: TimeOfDay(hour: 10, minute: 47),
builder: (context, child) {
return Theme(
data: ThemeData.light().copyWith(
colorScheme: ColorScheme.light(
// change the border color
primary: Colors.red,
// change the text color
onSurface: Colors.purple,
),
// button colors
buttonTheme: ButtonThemeData(
colorScheme: ColorScheme.light(
primary: Colors.green,
),
),
),
child: child,
);
},
);
結果:
您也可以在主題上使用狀態。 在進行某些操作(例如選擇或聚焦操作)時控制 styles。
這里有一個例子:
final theme = ThemeData.light().copyWith(
timePickerTheme: TimePickerThemeData(
backgroundColor: Colors.green.shade200,
hourMinuteColor: MaterialStateColor.resolveWith((states) =>
states.contains(MaterialState.selected)
? Colors.blue.withOpacity(0.2)
: Colors.orange),
hourMinuteTextColor: MaterialStateColor.resolveWith((states) =>
states.contains(MaterialState.selected)
? Colors.pink
: Colors.deepPurple),
dialHandColor: Colors.pink.shade800,
dialBackgroundColor: Colors.purple.withOpacity(0.5),
dialTextColor: MaterialStateColor.resolveWith((states) =>
states.contains(MaterialState.selected)
? Colors.green
: Colors.black),
entryModeIconColor: Colors.yellow
),
textTheme: TextTheme(
overline: TextStyle(
color: Colors.red,
),
),
textButtonTheme: TextButtonThemeData(
style: ButtonStyle(
backgroundColor: MaterialStateColor.resolveWith((states) => Colors.black),
foregroundColor: MaterialStateColor.resolveWith((states) => Colors.green),
overlayColor: MaterialStateColor.resolveWith((states) => Colors.pink),
)));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.