💭

[Flutter]DatePickerにおける色の変え方

2024/01/13に公開

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