💭
[Flutter]DatePickerにおける色の変え方
showDatePicker とは
ユーザーに日付を選択するためのダイアログを表示するために使用されるウィジェット
flutter/material.dart に含まれる
使い方の例
以下の関数をダイアログを表示したい場所で呼ぶ
ex) onPressed の中など
_datePicker(BuildContext context) async {
final DateTime? datePicked = await showDatePicker(
context: context,
initialDate: dateTime, // dateTime は変数として用意
firstDate: DateTime(2003),
lastDate: DateTime(2023));
if (datePicked != null && datePicked != dateTime) {
setState(() {
dateTime = datePicked;
});
}
}
色を変えるには
_datePicker(BuildContext context) async {
final DateTime? datePicked = await showDatePicker(
context: context,
initialDate: dateTime,
firstDate: DateTime(2003),
lastDate: DateTime(2023));
// ここに追記
builder: (context, child) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: ColorScheme.light(
primary: Colors.green, // 背景色のテーマや選択時の背景色、キャンセル,OKボタンの色
onPrimary: Colors.white, // 選択時のテキストカラー
onSurface: Colors.black, // カレンダーのテキストカラー
surfaceTint: Colors.transparent, // カレンダーにうっすらかかる色
),
),
child: child!,
);
},
}
注意点
Material Design 3 を適用している場合、カレンダーは、main.dart で設定したカラーテーマを基本的に引き継ぐ
指定していない場所は、設定したカラーテーマによって決まる
Discussion