【Flutter】日時をドラムロールで選択(flutter_datetime_picker_plus)

概要

以下のような画面を呼び出し、日時などが選択できるパッケージ(公式ドキュメントリンク)

showDateTimePicker(日付+時間)	showTimePicker(秒単位での時刻選択)

解説動画

本記事の解説動画を作成しました。動画が良い方はこちらもお願いします。 youtu.be

準備

• 参考：flutter_datetime_picker_plus install | Flutter package

パッケージの追加

dependencies:
  flutter_datetime_picker_plus: ^2.1.0
Copy code

インポート文

import 'package:flutter_datetime_picker_plus/flutter_datetime_picker_plus.dart';
Copy code

DatePicker(メイン機能)

日付選択(showDatePicker)

• ドラムロールで年・月・日の選択を行えます。
  

パラメータ(必須のみ赤文字)

• 参考：showDatePicker method - DatePicker class - flutter_datetime_picker library - Dart API

パラメータ	役割など
BuildContext	contextを割り当てる
minTime	これ以前の日時は選択不可になる。
maxTime	これ以降の日時は選択不可になる。
onChanged	引数：選択した日時(DateTime) ドラムロールを使って、年・月・日のいずれかを変更させたときに呼び出される処理。
onConfirm	引数：選択した日時(DateTime) 「完了」ボタンを押したときに呼ばれる処理。
onCancel	引数：なし 「キャンセル」ボタンを押したときに呼ばれる処理。
locale	言語設定(デフォルトは英語)

サンプルコード(上の画像のようになる)

DatePicker.showDatePicker(
  context,

  // 選択できる日時の範囲(2023年6月1日～2023年8月25日)
  minTime: DateTime(2023, 6, 1),
  maxTime: DateTime(2023, 8, 25),

  // ドラムロールを変化させたときの処理
  onChanged: (dateTime) {
    print('OnChanged: ${dateTime}');
  },

  // 「完了」を押したときの処理
  onConfirm: (dateTime) {
    print('OnConfirm: ${dateTime}');
  },

  // 「キャンセル」を押したときの処理
  onCancel: () {
    print('cancel');
  },

  //言語
  locale: LocaleType.jp, 
);
Copy code

日付+時間選択(showDateTimePicker)

• 年月日に加えて時・分の選択ができる。
• パラメータなどは「showDatePicker」とほぼ同じのため説明は省略。

サンプルコード

DatePicker.showDateTimePicker(
  context,

  // 選択できる日時の範囲
  minTime: DateTime(2023, 6, 1),
  maxTime: DateTime(2023, 8, 25),

  // 関数(onChangedなど)は省略

  //言語
  locale: LocaleType.jp, 
);
Copy code

実行結果

秒単位での24時間表示での時刻指定(showTimePicker)

• 参考：showTimePicker method - DatePicker class - flutter_datetime_picker library - Dart API
• 時・分・秒を指定できる(24時間表示)。
• パラメータなどは「showDatePicker」などとほぼ同じだが、minやmaxなどは指定できないので、表示範囲は制限できない。

サンプルコード

DatePicker.showTimePicker(
  context,

  // 関数(onChangedなど)は省略

  //言語
  locale: LocaleType.jp, 
);
Copy code

実行結果

秒単位でのAM・PMで分けた時刻指定(showTime12hPicker)

• 「showTimePicker」とほぼ同じだが、AM・PMで分けた12時間表示。

サンプルコード

DatePicker.showTime12hPicker(
  context,

  // 関数(onChangedなど)は省略

  //言語
  locale: LocaleType.jp, 
);
Copy code

実行結果

サンプルアプリ

• 先ほどまでの「showDatePicker」、「showDateTimePicker」、「showTimePicker」、「showTime12hPicker」をボタンで表示できるようにしたものです。

ソースコード

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

void main() {

  const app = MaterialApp(
    home: MyApp(),
  );

  runApp(app);
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('DatePiciker Test'),
      ),

      body: Center(
        child: Column(
          children: <Widget>[

            // showDatePicker
            ElevatedButton(
              onPressed: (){
                DatePicker.showDatePicker(
                  context,

                  // 選択できる日時の範囲
                  minTime: DateTime(2023, 6, 1),
                  maxTime: DateTime(2023, 8, 25),

                  // ドラムロールを変化させたときの処理
                  onChanged: (dateTime) {
                    print('OnChanged: ${dateTime}');
                  },

                  // 「完了」を押したときの処理
                  onConfirm: (dateTime) {
                    print('OnConfirm: ${dateTime}');
                  },

                  // 「キャンセル」を押したときの処理
                  onCancel: () {
                    print('cancel');
                  },

                  //言語
                  locale: LocaleType.jp, 
                );
              }, 
              child: const Text('showDatePicker')
            ),

            // showDateTimePicker
            ElevatedButton(
              onPressed: (){
                DatePicker.showDateTimePicker(
                  context,

                  // 選択できる日時の範囲
                  minTime: DateTime(2023, 6, 1),
                  maxTime: DateTime(2023, 8, 25),

                  // 関数(onChangedなど)は省略

                  //言語
                  locale: LocaleType.jp, 
                );
              }, 
              child: const Text('showDateTimePicker')
            ),

            // showTimePicker
            ElevatedButton(
              onPressed: (){
                DatePicker.showTimePicker(
                  context,

                  // 関数(onChangedなど)は省略

                  //言語
                  locale: LocaleType.jp, 
                );
              }, 
              child: const Text('showTimePicker')
            ),

            // showTime12hPicker
            ElevatedButton(
              onPressed: (){
                DatePicker.showTime12hPicker(
                  context,

                  // 関数(onChangedなど)は省略

                  //言語
                  locale: LocaleType.jp, 
                );
              }, 
              child: const Text('showTime12hPicker')
            ),
          ],
        ),
      ),
    );
  }
}
Copy code

実行結果