[Flutter]DatePickerのヘッダーテキストの色を変えるには？

Flutter

2021.10.07

どうも、ちょげ(@chogetarou)です。

DatePickerのヘッダーのテキストの色を変えるには、どうしたらいいのでしょうか？

方法

    final newDate = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(DateTime.now().year - 3),
      lastDate: DateTime(DateTime.now().year + 3),
      builder: (context, child) {
        return Theme(
          data: Theme.of(context).copyWith(
            colorScheme: ColorScheme.light(
              primary: Colors.yellow, // ヘッダー背景色
              onPrimary: Colors.black, // ヘッダーテキストカラー
              onSurface: Colors.green, // カレンダーのテキストカラー
            ),
            textButtonTheme: TextButtonThemeData(
              style: TextButton.styleFrom(
                primary: Colors.red, // ボタンのテキストカラー
              ),
            ),
          ),
          child: child!,
        );
      },
    );

ヘッダーのテキストカラーを変えるには、引数「builder」を使います。

「builder」で、色の設定をする「Theme」を返すことで色を設定することが出来ます。

ヘッダーのテキストカラーの設定は、「Theme」の「onPrimary」で行います。

onPrimaryだけを設定すると、他の部分の色が自動的に設定されます。

ヘッダーのテキストカラーだけを変えたいという場合は、他の部分の色も引数で設定する必要があります。