はじめに

弊社で開発している自社サービスにおいて日付の選択はDatePicker、
時間の選択はTimePickerを使用しています

それぞれにアプリ全体のテーマカラーを適用した際、TimePickerに関しては自由度が高かったので
備忘録がてら書こうと思います

任意のTimePickerのテーマだけ編集したい場合

デフォルトのTimePickerは以下のような感じです

showTimePicker関数内でテーマを設定できます

await showTimePicker(context: context, initialTime: initialTime, 
  builder: (context, child){
    return Theme(
        data: Theme.of(context).copyWith(
          timePickerTheme: TimePickerThemeData(
            // ここに任意のプロパティを設定していく
          )
        ),
        child: child!,
    );
  }
);

設定できるプロパティは以下です

Color? backgroundColor
TimePickerの背景色を設定

BorderSide? dayPeriodBorderSide
AM/PM部分の枠組みの太さ、色を設定

Color? dayPeriodColor
AM/PM部分の背景色を設定

OutlinedBorder? dayPeriodShape
AM/PM部分がデフォルトでは四角形だが他の形に設定

Color? dayPeriodTextColor
AM/PM部分のテキストカラーを設定

TextStyle? dayPeriodTextStyle
AM/PM部分のテキストスタイルを設定

Color? dialBackgroundColor
ダイヤル部分の背景色を設定

Color? dialHandColor
ダイヤル部分の針の色を設定

Color? dialTextColor
ダイヤル部分の数字のテキストカラーを設定

Color? entryModeIconColor
入力モードアイコンボタン(左下のキーボードアイコン)の色を設定

TextStyle? helpTextStyle
ヘッダー(例でいう'SELECT TIME'の箇所)のテキストスタイルを設定

Color? hourMinuteColor
選択した時刻セグメント(例でいう'10:00'の部分)の背景色を設定

ShapeBorder? hourMinuteShape
選択した時刻セグメント部分がデフォルトでは四角形だが他の形に設定

Color? hourMinuteTextColor
選択した時刻セグメントのテキストカラーを設定

TextStyle? hourMinuteTextStyle
選択した時刻セグメントのテキストスタイルを設定

InputDecorationTheme? inputDecorationTheme
入力モード時のテキストボックスの装飾を設定

ShapeBorder? shape
TimePicker表示時のダイアログのデフォルトは四角形だが
任意の図形を設定
※指定した図形から中のコンテンツがはみ出した場合もエラーにはならず
表示はされる

プロジェクト内全てのTimePickerのテーマを編集したい場合

この場合はアプリ全体のテーマカラーを設定するPrimarySwatchに
任意の色を設定すれば大丈夫です

Flutter側で定義されているMaterialColorを使用するならPrimarySwatchに指定するだけで
簡単に対応できますが、それ以外の色を指定したい場合は自前でMaterialColorを定義する必要があります

弊社のアプリでは#FC5200という色をアプリテーマにしているので以下のように対応しました

main.dart

//~~~~~省略~~~~~

// 自前でMaterialColorを定義する
const MaterialColor customSwatch = MaterialColor(
  0xffFC5200,
  <int, Color>{
    50: Color(0xFFFFEAE0),
    100: Color(0xFFFECBB3),
    200: Color(0xFFFEA980),
    300: Color(0xFFFD864D),
    400: Color(0xFFFC6C26),
    500: Color(0xFFFC5200),
    600: Color(0xFFFC4B00),
    700: Color(0xFFFB4100),
    800: Color(0xFFFB3800),
    900: Color(0xFFFA2800),
  },
);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 定義したMaterialColorを指定する
        primarySwatch: customSwatch,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

//~~~~~省略~~~~~

よしなにテーマに設定した色がきいた配色にしてくれます

もう少し細かく設定したい場合はMaterialApp内のThemaにTimePickerThemeDataを設定します

main.dart

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        timePickerTheme: TimePickerThemeData(
          // ここに任意のプロパティを設定していく
        ),
        primarySwatch: customSwatch,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

最後に

特に細かいこだわりがなければPrimarySwatchに色を指定するだけが簡単かなと思いました
細かくデザインしたい、TimePickerごとにデザインを変えたい等のこだわりがある場合は
TimePickerThemeDataを利用しての設定という使い分けになるかと思います

はじめに

目次

任意のTimePickerのテーマだけ編集したい場合

プロジェクト内全てのTimePickerのテーマを編集したい場合

最後に

参考文献