flutter widget

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

概要

Flutterで用意されているDatePicker(カレンダー)を実装する。

また、デフォルトでは英語のままなので日本語化も行う。

最終的な画面イメージ

DatePicker日本語化後

最終的なコード

最終的な全体コードは、こちらを参照してください。

具体的な実装手順

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(2018),
        lastDate: new DateTime.now().add(new Duration(days: 360))
    );

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

作った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);
    }
  }

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

選択した日時と、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('日付選択'),
          )
        ],
      )
  );
}

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

ここまでで問題なく起動すると、以下のようにDatePickerが立ち上がると思います。

ボタンを押下するとカレンダーが表示される。

DatePickerボタン押下時

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

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

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

import文を追加する

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

import 'package:flutter_localizations/flutter_localizations.dart';

 

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

MaterialAppにローケルを追加する。(enはなくても問題ないはず。)

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

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))
    );

再ビルド

エラーなくビルド出来ていれば、画像のように日本語が出来ています。

DatePicker日本語化後

 

エラー・思うようにいかない場合

正しくインポート出来ていない

パッケージを追加した後、VScodeなどではポップアップでパッケージを取得するボタンが表示されたら最新を取得します。

もし表示されない場合は、パッケージを取得するコマンドを実行する。

flutter pub get

おわりに

ここの解釈が違うよ!ここのコードこうすべき!などありましたらコメントなど頂けると助かります。

Flutter Doc JP にある、showDatePickerを囲っている「Future<Null> _selectTime(BuildContext context) async {}」のFuture<null>部分のコードを深く追っていないため、

使い方?用途?がいまいちピンと来ていないので、少し書き換えました。もし用途などを知っている方ご教授ください。。

参考サイト

-flutter, widget
-, , , , ,

Copyright© エンジニアが学んだことをアウトプットしていく , 2022 All Rights Reserved Powered by AFFINGER5.