FlutterのDateTime Pickerと言えば showDatePickerでカレンダーのダイアログが立ち上がるのがよく使われていますが、今回はダイアログでなく、画面にDatePickerを埋め込みたかったのでこちらを使用せず flutter_date_pickersを使用しました。

こちらUIに合わせて色なども変更でき、

DayPicker
WeekPicker
RangePicker
MonthPicker

と4種類あり、実装も簡単で使いやすかったです。

ただ、pub.devみても日本語化する方法が全く載っていなくて、調べても出てきませんでしたが、このプラグインのGitHubリポジトリーのissueに載ってました。

Support for localization

こちらに書いてある様に flutter_localizations.dart をimportして、 main.dartに以下を追加して日本語の設定を行います。

import 'package:flutter_localizations/flutter_localizations.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      supportedLocales: const [
        Locale('en'),
        Locale('ja'),
      ],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
    );
  }
}

しかし、この設定してビルドしたら以下のエラーが発生！

Unsupported operation: Cannot set value in unmodifiable Map

こちらのエラーに対しては、[Flutter] Unsupported operation: Cannot set value in unmodifiable Map の対処方法に書かれてある通りに initializeDateFormatting()が原因でした。

 Intl.defaultLocale = 'ja_JP';
await initializeDateFormatting('ja_JP');

こちらをコメントアウトするとちゃんとビルドできました！

この通り、年月日が日本語になりました。
material.dart の DateTime Pickerでなくても画面に埋め込みができ使い方によってはTimePickerと合わせて1画面で使うことが可能です。

参考文献