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

概要
準備
- パッケージの追加
- インポート文
DatePicker(メイン機能)
サンプルアプリ
- ソースコード
- 実行結果

概要

日時選択のためのパッケージ
↓↓公式ドキュメント

準備

参考：flutter_datetime_picker_plus | Flutter Package

パッケージの追加

dependencies:
  flutter_datetime_picker_plus: ^2.1.0

インポート文

import 'package:flutter_datetime_picker_plus/flutter_datetime_picker_plus.dart';

DatePicker(メイン機能)

日付選択(showDatePicker)

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

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

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

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

showDatePicker

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

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

日付+時間選択(showDateTimePicker)

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

サンプルコード

DatePicker.showDateTimePicker(
  context,

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

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

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

実行結果

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

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

サンプルコード

DatePicker.showTimePicker(
  context,

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

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

実行結果

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

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

サンプルコード

DatePicker.showTime12hPicker(
  context,

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

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

実行結果

サンプルアプリ

先ほどまでの「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')
            ),
          ],
        ),
      ),
    );
  }
}