【Flutter】DatePickerの色を変更する

エキサイト株式会社のメディア事業部でモバイルアプリ開発をおこなっている、辻です。

日時や時刻の選択を行うDatePickerは、モバイルアプリやWebアプリ等、フロントエンドでは使用することの多いUIコンポーネントだと思います。 今回はそんなDatePickerをFlutterで利用する際の、色の変更方法について書いていきます。

DatePickerの使用

FlutterでDatePickerを使用するためには、showDatePicker()を、DatePickerを表示したいタイミングで呼び出します。

final selectedDate = await showDatePicker(
    context: context,
    // DatePicker表示時に出す日付
    initialDate: DateTime.now(),
    // 選択できる一番古い日付
    firstDate: DateTime.utc(2000),
    // 選択できる一番新しい日付
    lastDate: DateTime.now()
);

f:id:excite_yuchiro22:20210414194013p:plain
DatePicker表示

色の変更

DatePickerの色を変更するには、builderプロパティにThemeを適用します。

final selectedDate = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime.utc(2000),
    lastDate: DateTime.now(),

    // 追加
    builder: (BuildContext context, Widget child) {
        return Theme(
            data: ThemeData.light().copyWith(
                colorScheme: ColorScheme.light().copyWith(
                    // 変更したい色
                    primary: Colors.red,
                ),
             ),
             child: child,
        );
    }
);

f:id:excite_yuchiro22:20210414194102p:plain
DatePicker色変更

※ 2020年に行われたFlutterのTheme Systemのアップデートに伴い、Theme.dataの設定方法が変更されています。

Before

Theme(
    data: ThemeData.light().copyWith(
        primaryColor: Colors.red, 
     ),
     child: child,
);

After

Theme(
    data: ThemeData.light().copyWith(
        colorScheme: ColorScheme.light().copyWith(
            primary: Colors.red,
        ),
    ),
    child: child,
);

参考

DatePicker

DatePicker custom theme is not working after the latest update

Theme System Updates

おわりに

徐々に気温も暖かくなり、私は早くバイクに乗りたい気分です。

さて、エキサイトでは、一緒に働けるモバイルアプリエンジニアを募集しています! もし興味がありましたら是非こちらのリンクから、お話しましょう! www.wantedly.com