flutter

【Flutter】ドラムロール式で日時を選択するDatetimePickerの使い方

ドラムロール式で日時を選択するDatetimePickerの使い方

こんにちは！

個人アプリで、日付・時間を設定する際に、ドラムロールで日付を選択したかったので、DatetimePickerを使ってみました。

DatetimePickerで調べてみると、日付を設定する方法は見つかったのですが、時間を設定する方法や、

日付と時間を一緒に設定する方法はあまり出てこなかったので、まとめてみようと思います。

DatetimePickerを使わずに自力でやろうとすると、閏年の計算や、各月の月末の日付など、考慮しなきゃいけない事がたくさんあるので、積極的に使っていきましょう！

環境

今回の環境

  • Dart 2.18.2
  • Flutter 3.3.3
  • flutter_datetime_picker: ^1.5.1

まずはDatetimePickerのパッケージをインストールします。

以下のように「pubspeck.yaml」に記述して、flutter pub getしましょう。

dependencies:
  flutter:
    sdk: flutter

  flutter_datetime_picker: ^1.5.1
Dart packages
 
flutter_datetime_picker | Flutter Package
https://pub.dev/packages/flutter_datetime_picker
A date time picker for flutter, you can choose date / time / date&time in English Dutch and Chinese, and you can also custom your own picker content

DatetimePickerをインポートします。

import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';

各DatePickerの基本的なプロパティ

各DatePickerの基本的なプロパティは以下になります。

DatePickerの種類によって、使えたり、使えなかったりするプロパティがあります。

プロパティ名 型 内容
showTitleActions bool trueの場合、DatetimePickerのモーダル内の「キャンセル」「完了」を表示します。falseの場合は、表示しません。
minTime DateTime 最小の日付を設定します。
maxTime DateTime 最大の日付を設定します。
onChanged Function(DateTime) DatetimePickerの日付を変更した場合の処理を記述します。「完了」ボタンを押していない場合でも、日付をスクロールした段階で検知されます。
onConfirm Function(DateTime) DatetimePickerの日付を変更して、「完了」ボタンを押した場合の処理を記述します。
currentTime
 DateTime DatetimePickerの初期値を設定します。
locale DatetimePickerの言語設定をします。LocaleType.jpを設定することで、日本語設定になります。
showSecondsColumn bool showTimePickerなど時間を設定できるDatetimePickerを使う場合で、「秒」の表記が不要の場合は、showSecondsColumnをfalseにします。

日付のみ選択

まずは以下のように、ドラム式で日付だけを選択したい場合を見ていきます。

日付のみにする場合は、DatetimePickerのshowDatePickerを使います。

TextButton(
  onPressed: () {
    DatePicker.showDatePicker(context,
      showTitleActions: true,
      minTime: DateTime(2022, 1, 1),
      maxTime: DateTime(2023, 12, 31),
      onChanged: (date) {
        print(date);
      },
      onConfirm: (date) {
        print(date);
      },
      currentTime: DateTime.now(),
      locale: LocaleType.jp
    );
  },
  child: const Text(
    '日付を選択',
    style: TextStyle(color: Colors.blue),
  ),
),

時間のみ選択

次に、以下のように時間のみ選択した場合を見て行きます。

時間のみにする場合は、DatetimePickerのshowTimePickerを使います。

TextButton(
  onPressed: () {
    DatePicker.showTimePicker(context,
      showTitleActions: true,
      showSecondsColumn: true,
      onChanged: (date) {
        print(date);
      },
      onConfirm: (date) {
        print(date)
      },
      currentTime: DateTime.now(),
      locale: LocaleType.jp
    );
  },
  child: const Text(
    '時間を選択',
    style: TextStyle(color: Colors.blue),
  ),
),

秒の情報が不要なケースもあると思います。その場合は、showSecondsColumnをfalse(初期値はtrue)に指定してください。

showSecondsColumn: false

日付+時間を選択

以下のように、日付と時間を同時に選択するようにもできます。

日付と時間を同時に選択する場合は、showDateTimePickerを使います。

TextButton(
  onPressed: () {
    DatePicker.showDateTimePicker(context,
      showTitleActions: true,
      minTime: DateTime(2022, 1, 1,11,22),
      maxTime: DateTime(2023, 12, 31, 11, 22),
      onChanged: (date) {
        print(date);
      },
      onConfirm: (date) {
        print(date)
      },
      currentTime: DateTime.now(),
      locale: LocaleType.jp
   );
  },
  child: const Text(
    '日付+時間を選択',
     style: TextStyle(color: Colors.blue),
  ),
),

時間(12時間表示)を選択

以下のように時間表示を12時間にしたい場合を見て行きます。

時間のみにする場合は、showTime12hPickerを使います。

TextButton(
  onPressed: () {
    DatePicker.showTime12hPicker(context,
      showTitleActions: true,
      onChanged: (date) {
        print(date);
      },
      onConfirm: (date) {
        print(date)
      },
      currentTime: DateTime.now(),
      locale: LocaleType.jp
    );
  },
  child: const Text(
    '時間(12時間表示)を選択',
     style: TextStyle(color: Colors.blue),
   ),
 ),

年+月+日を選択する場合

以下のように、年+月+日を選択したい場合を見て行きます。

時間のみにする場合は、showPickerを使います。

TextButton(
  onPressed: () {
    DatePicker.showPicker(context,
      showTitleActions: true,
      onChanged: (date) {
        print(date);
      },
      onConfirm: (date) {
        print(date)
      },
      locale: LocaleType.jp
    );
  },
  child: const Text(
    '年+月+日を選択',
    style: TextStyle(color: Colors.blue),
  ),
),

現状、localeにLocaleType.jpを指定して、日本語設定していますが、月は英語表示になってしまいます。

ここはちょっと微妙なところですね。。。

以上になります！！

-flutter
-, , ,