はじめに

日付・時間選択ダイアログの背景色やボタンの色変更について書いていこうと思います。
何も色を指定していないと、MaterialAppウィジェットのthemeで指定されているcolorSchemeの色が反映されてしまいます。プロジェクト作成時だと紫っぽくなっていると思います。
アプリごとに基調とする色があると思うので、色の変更をする必要があります。MaterialAppウィジェットのthemeで指定できるThemeDataクラスのプロパティとして、timePickerThemeとdatePickerThemeがあります。
ただ、これらを指定しても色が変わらなかったり、ダイアログ内のウィジェットで色を指定できない箇所があったりして詰まったりしました。
なので、実際にダイアログの色を変更する際にどのように指定したらいいかを書いていきたいと思います。※他にいい方法があるかもしれないです。。

MaterialAppのテーマ設定箇所

プロジェクトを作成する時に以下のMyAppクラスが作られて、ルートウィジェットであるMaterialAppを返す様になっていると思います。
themeのプロパティにdatePickerTheme、timePickerThemeの色等を設定できそうな箇所がありました。
ただdatePickerThemeにはボタンの色を指定するプロパティがありませんでした。(timePickerThemeにはボタンのスタイルを変えるプロパティがあったけど、色を指定しても変化しませんでした。。)

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
        datePickerTheme:
            const DatePickerThemeData(),
        timePickerTheme:
            const TimePickerThemeData(),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

ダイアログの色の変更方法について

ボタンの色も変えたい関係で、実際に時間や日付選択ダイアログを表示させている箇所で、色を指定することにしました。
showDatePicker、 showTimePickerにはbuilderというプロパティがあり、そこでThemeを指定してあげるとそれがダイアログの色に反映されます。
backgroundColorとsurfaceTintColorで白を指定してあげることで、背景色が白になりました。
※日付・時間選択ダイアログのコードについてはこの記事を参照

final pickedDate = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
      builder: (context, child) {
        return Theme(
            data: Theme.of(context).copyWith(
                datePickerTheme: const DatePickerThemeData(
                    backgroundColor: Colors.white,
                    surfaceTintColor: Colors.white)),
            child: child!);
      },
    );

ボタンの色を変更する

datePickerThemeには「OK」や「キャンセル」に関するボタンの色のプロパティが見当たりませんでした。なので、datePickerThemeではなく、textButtonThemeでボタンの色を指定します。
MaterialAppでtextButtonThemeを指定すると、変更したくない箇所にまで影響が及ぶ可能性があるので、複数箇所で日付選択ダイアログを使用しない場合はダイアログごとに色を指定するか、ダイアログの表示処理を集約して色を設定するほうがいいかもしれません。

datePickerTheme: const DatePickerThemeData(
                    backgroundColor: Colors.white,
                    surfaceTintColor: Colors.white),
                textButtonTheme: TextButtonThemeData(
                    style: TextButton.styleFrom(foregroundColor: Colors.blue))),

時間を選択できるtimepickerでも、テーマで指定できるプロパティは少し違いますが、datePickerと同じような方法で色の指定をすることができます。

おわりに

今回は日付・時間選択ダイアログの色変更方法について書いていきました。
今後も実際に開発で詰まった箇所などをアウトプットしていきたいと思います。