Flutter標準機能で日付ピッカーを表示するshowDatePickerの使い方

Flutterには、標準でユーザーが日付を選択できるインターフェイスを表示するshowDatePicker関数が提供されています。この関数は簡単に日付ピッカーを表示でき非常に便利です。この記事では、showDatePicker関数の概要と基本的な使い方、さらに日本語での表示方法について詳しく解説します。

はじめに（showDatePickerとは？）

showDatePicker関数は、Flutterのmaterialライブラリに含まれるモーダルダイアログを使って日付を選択するためのUIを提供します。この関数はユーザーがピッカーで日付を選択すると、選択した日付のDateTimeオブジェクトが返されます。

showDatePickerの基本的な使い方

以下は、showDatePicker関数を使った基本的な例です。この例では、現在の年から100年前までの日付を選択可能な範囲として設定しています。

DateTime? selectedDate = await showDatePicker(
  context: context,
  initialDate: DateTime(DateTime.now().year - 100),  // 初期値
  firstDate: DateTime(DateTime.now().year - 100),    // 最小日
  lastDate: DateTime(DateTime.now().year),           // 最大日
);

以下、実行結果です。

このコードは、ユーザーがダイアログから日付を選択すると、その日付がselectedDateに格納されます。contextはダイアログを表示するために必要なBuildContextです。ユーザーが日付を選択せずにキャンセルすると、戻り値にはnullが返ります。

showDatePickerの引数

showDatePicker関数では多くの引数を設定でき、それぞれの引数によってカレンダーダイアログの挙動が変わります。以下に主要な引数の説明を表形式で示します。

引数名	説明
initialDate	ダイアログが開かれたときに表示される初期日付です。
firstDate	選択可能な最小日付を指定します。
lastDate	選択可能な最大日付を指定します。
locale	ダイアログのローカライゼーション設定。特定の言語を指定できます。
currentDate	現在の日付をハイライト表示する場合に使用します。
helpText	ダイアログのヘルプテキストをカスタマイズします。
cancelText	キャンセルボタンのテキストをカスタマイズします。
confirmText	確認ボタンのテキストをカスタマイズします。
barrierDismissible	ダイアログ外をタップしたときにダイアログを閉じるかどうか。

日本語表示に対応する

showDatePickerで表示される日付ピッカーは、デフォルトでは英語表記です。
FlutterでshowDatePickerを日本語表示にするためには、flutter_localizationsパッケージの設定が必要です。まずは依存関係にパッケージを追加します。

flutter pub add flutter_localizations

次に、MaterialAppでローカライゼーションのデリゲートとサポートするロケールを設定します。

return MaterialApp(
  title: 'Flutter Demo',     
  home: const HomePage(),
  localizationsDelegates: GlobalMaterialLocalizations.delegates,
  supportedLocales: const [
    Locale('en'), // 英語
    Locale('ja'), // 日本語
  ],
);

そして、showDatePicker関数を呼び出す際にlocale引数にLocale('ja')を指定します。

DateTime? selectedDate = await showDatePicker(
  context: context,
  initialDate: DateTime(DateTime.now().year - 100),  // 初期値
  firstDate: DateTime(DateTime.now().year - 100),    // 最小日
  lastDate: DateTime(DateTime.now().year),           // 最大日
  locale: const Locale('ja'), // 日本語を設定
);

これでshowDatePickerが日本語で表示されるようになります。

まとめ

showDatePickerはFlutterで日付入力を簡単に実装するためのウィジットです。
追加のライブラリを必要とせず、手軽に日付ピッカーが実装可能です。