1. はじめに

デフォルトで用意されているDatePicker（カレンダー）を実装する。
実装すると英語のままなので日本語化も行う。

2. 最終的な画面イメージ

3. 最終的なコード

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DatePickerSample',
      home: Scaffold(
        appBar: AppBar(
          title: Text('DatePickerSample'),
        ),
        body: Center(
          child: DatePicker(),
        ),
      ),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale("en"),
        const Locale("ja"),
      ],
    );
  }
}

class DatePicker extends StatefulWidget {
  @override
  _DatePickerState createState() => _DatePickerState();
}

class _DatePickerState extends State<DatePicker> {

  // 現在日時
  DateTime _date = new DateTime.now();

  // ボタン押下時のイベント
  void onPressedRaisedButton() async {
    final DateTime picked = await showDatePicker(
      locale: const Locale("ja"),
      context: context,
      initialDate: _date,
      firstDate: new DateTime(2020),
      lastDate: new DateTime.now().add(new Duration(days: 360))
    );

    if (picked != null) {
      // 日時反映
      setState(() => _date = picked);
    }
  }

  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.all(70.0),
        child: Column(
          children: <Widget>[
            // 日時表示部分
            Center(child:Text("${_date}")),
            // DatePicker表示ボタン。
            new RaisedButton(onPressed: () => 
              // 押下時のイベントを宣言。
              onPressedRaisedButton(),
              child: new Text('日付選択'),
            )
          ],
        )
    );
  }
}

4. 具体的な実装手順

1.showDatePickerを用意する

showDatePickerはFlutterのマテリアルデザインとして既に用意されています。とても便利。

packages/flutter/lib/src/material/date_picker.dart

こちら使って4つの引数（context, initialDate, firstDate, lastDate）を指定する。
最初と最後の日を指定できます。

final DateTime picked = await showDatePicker(
        context: context,
        initialDate: _date,
        firstDate: new DateTime(2020),
        lastDate: new DateTime.now().add(new Duration(days: 360))
    );

2.ボタンが押下時のイベントとして宣言する

作ったshowDatePickerをイベントとして宣言しておく。

// ボタン押下時のイベント
  void onPressedRaisedButton() async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: _date,
      firstDate: new DateTime(2018),
      lastDate: new DateTime.now().add(new Duration(days: 360))
    );

    if (picked != null) {
      // 日時反映
      setState(() => _date = picked);
    }
  }

3.画面表示エリアとボタンを作る

選択した日時と、DatePickerを表示するためのボタンを作る。（レイアウトは各自の好みで）

Widget build(BuildContext context) {
  return Container(
      padding: const EdgeInsets.all(70.0),
      child: Column(
        children: <Widget>[
          // 日時表示部分
          Center(child:Text("${_date}")),
          // DatePicker表示ボタン。
          new RaisedButton(onPressed: () => 
            // 押下時のイベントを宣言。
            onPressedRaisedButton(),
            child: new Text('日付選択'),
          )
        ],
      )
  );
}

4.ここまでのコードで起動してみる

問題なく起動すると、以下のようにDatePickerが立ち上がる。
ボタンを押下するとカレンダーが表示される。

5.flutter_localizationsパッケージのインストール

pubspec.yamlファイルに「flutter_localizations」を追記します。（もし既にある場合は必要ありません。）

dependencies:
  flutter:
    sdk: flutter
  // この行を追加
  flutter_localizations:
    sdk: flutter

6.import文を追加する

パッケージのインポートを追加した後は、実装しているコードに戻り、インポート文を追加する。

import 'package:flutter_localizations/flutter_localizations.dart';

7.サポートするロケールを追加する

MaterialAppにロケールを追加する。

@override
Widget build(BuildContext context) {
  return MaterialApp(
    // 一部省略
    title: 'DatePickerSample',
    home: Scaffold(),
    // ここを追加する。
    localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
    ],
    // ここを追加する。
    supportedLocales: [
      const Locale("en"),
      const Locale("ja"),
    ],
  );
}

8.showDatePickerにロケールを追加する

4つの引数からロケールを増やす。

final DateTime picked = await showDatePicker(
    // ここを追加
    locale: const Locale("ja"),
    context: context,
    initialDate: _date,
    firstDate: new DateTime(2018),
    lastDate: new DateTime.now().add(new Duration(days: 360))
    );

9.再ビルド

再ビルドすると、画像のように日本語化が出来ています。

5. 備考

パッケージを追加した後、VScodeなどではポップアップでパッケージを取得するボタンが表示されたら最新を取得します。
ポップアップが表示されない場合は、ターミナルで以下コマンドを実行してください。

flutter pub get

6. おわりに

Flutter Doc JP
にある、時刻をUIで設定出来るダイアログあるけど使う出番はあるのかな。
より良い実装方法などありましたらご教授いただけると嬉しいです。

[Flutter] DatePickerを実装＆日本語化してみる

目次