Flutterで日付と時間を同時選択させるためのDatetime Pickerを使う手順

公開日：2019/05/22 更新日：2019/05/22

Photo by Djim Loic on Unsplash

はじめに

スマートフォンのアプリでよく日付や時間を選択するような場合があると思います。この記事では、Flutterで日付と時間の両方を同時にユーザに選択するためのDatetime Pickerの実装手順について簡単にまとめます。なお、もし時間の指定は不要で日付のみの選択が必要な場合は、Flutterにデフォルトで用意されているshowDatePickerをそのまま使用するのが良いです。また、showDatePickerに加えてshowTimePickerが公式で用意されているので、こちらを組み合わせれば日時の選択をさせるためのUIを作成できますが、この記事では何かしらの理由で日付と時間の選択をユーザに同時にさせたい場合を想定しています。

できるようになること

以下のGIF画像のように、ボタンをタップすることで日時を選択できるDatetime Pickerを表示します。

このデモのコードは以下のGitHubにあげてあります。

github.com

virment/flutter-sample

Datetimepicker sample

前提と環境

以下の通りです。

Flutter 1.5.4-hotfix.2
Dart 2.3.0

使用するパッケージについて

Flutterでは、日付を選択するためのshowDatePickerと時間を選択させるためのshowTimePickerがそれぞれ公式で用意されていますが、調べたところ2019年5月時点では日付と時間を同時に選択させるような公式パッケージはないようです。しかしいくつか代わりのパッケージが公開されています。ここではその内の１つであるflutter_datetime_pickerを使用します。以下がこのパッケージの公式ページになります。

pub.dev

flutter_datetime_picker

A flutter date time picker inspired by flutter-cupertino-date-picker

また、日付のフォーマットを指定するためにintlというパッケージも使用します。

pub.dev

intl

This package provides internationalization and localization facilities, including message translation, plurals and genders, date/number formatting and parsing, and bidirectional text.

flutter_datetime_pickerとintlをインストールする

以下のようにpubspec.yamlに追記して保存します。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_datetime_picker: ^1.2.1 # これを追記して保存
  intl: ^0.15.8 # これを追記して保存

また、main.dartなどでimportします。

main.dart

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
import 'package:intl/intl.dart';

以上でDatetime Pickerを使うための準備は完了です。

Datetime Pickerを使用する

使い方はとても簡単で、例えばボタンのクリックでDatetime Pickerを呼び出したい場合は以下のようにonPressedにDatetime Pickerを渡します。以下のコードは冒頭に載せたデモと同じ動作をするものです。なお、コードの大半はFlutterのプロジェクト作成時に生成されるコードそのものです。

main.dart

// コード全体はGitHub参照
(...以上省略...)

class _MyHomePageState extends State {
  // 選択した日時を格納する変数
  var _mydatetime = new DateTime.now();

  // 日時を指定したフォーマットで指定するためのフォーマッター
  var formatter = new DateFormat('yyyy/MM/dd(E) HH:mm');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'あなたが選択した日時は以下です: ',
            ),
            Text(
              // フォーマッターを使用して指定したフォーマットで日時を表示
              // format()に渡すのはDate型の値で、String型で返される
              formatter.format(_mydatetime),
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
         onPressed: () {
           DatePicker.showDateTimePicker(
             context,
             showTitleActions: true,
             // onChanged内の処理はDatepickerの選択に応じて毎回呼び出される
             onChanged: (date) {
                // print('change $date');
             }, 
             // onConfirm内の処理はDatepickerで選択完了後に呼び出される
             onConfirm: (date) {
               setState(() {
                 _mydatetime = date;
               });
             }, 
             // Datepickerのデフォルトで表示する日時
             currentTime: DateTime.now(), 
             // localによって色々な言語に対応
             //  locale: LocaleType.en
          );
        },
        tooltip: 'Datetime',
        child: Icon(Icons.access_time),
      ), 
    );
  }
}

上記のコードを見てわかるとおり、DatePicker:showDateTimePickerでDatetime Pickerを生成しています。もし時間指定は不要で日付のみ指定するDate Pickerが必要な場合は、以下のようにshowDatePickerとします。

main.dart

// コード全体はGitHub参照
(...以上省略...)
         onPressed: () {
           DatePicker.showDatePicker(
             context,
             showTitleActions: true,

             // onChanged内の処理はDatepickerの選択に応じて毎回呼び出される
             onChanged: (date) {
                // print('change $date');
             }, 
             // onConfirm内の処理はDatepickerで選択完了後に呼び出される
             onConfirm: (date) {
               setState(() {
                 _mydatetime = date;
               });
             }, 
             // Datepickerのデフォルトで表示する日時
             currentTime: DateTime.now(), 
             // localによって色々な言語に対応
             //  locale: LocaleType.en
          );
        },
(...以下省略...)

なお、冒頭でも説明したように、もし時間の選択は不要な場合は、公式のshowDatePickerが用意されています。

api.flutter.dev

showDatePicker function

Shows a dialog containing a material design date picker.