【Flutter】ドラムロールUIで生年月日の入力 ~flutter_datetime_picker_plus~

はじめに

iOSおよびAndroidアプリで生年月日を入力する際、ドラムロール式のピッカーを使用するのが一般的です。
Flutterでは、flutter_datetime_picker_plus パッケージを利用することで、簡単にクロスプラットフォームで対応できる日付ピッカーを実装できます。
本記事では flutter_datetime_picker_plus を使って、生年月日入力を実装する方法を解説します。

【補足】
以前CupertinoDatePickerについての記事を掲載させていただきました。
CupertinoDatePickerはiOS向けのUIになるため、 iOS・Android共通のデザインを適用したい場合はこちらを参考にすると良いかと思います。
またflutter_datetime_picker_plusでは日本語対応時、flutter_localizations等が
なくても良いため若干カスタマイズが楽という利点もあります。
アプリによって良し悪しは変わりますのでどちらも試して良い方を採用していただけましたら幸いです。

目次

1. flutter_datetime_picker_plusとは
2. flutter_datetime_picker_plusを使った実装方法
3. まとめ

flutter_datetime_picker_plusとは

flutter_datetime_picker_plus は、日付および時間を選択できるウィジェットを提供するFlutterのパッケージです。
iOSとAndroid両方のデバイスでネイティブに動作し、ドラムロール式の日付選択UIを簡単に実現できます。
インストールも簡単で、UIのカスタマイズが可能です。

flutter_datetime_picker_plusの公式ドキュメント
https://pub.dev/packages/flutter_datetime_picker_plus

flutter_datetime_picker_plusを使った実装方法

flutter_datetime_picker_plus パッケージを使って、生年月日入力のドラムロール式ピッカーを実装する手順を解説します。

1. パッケージのインストール

まずは flutter_datetime_picker_plus をプロジェクトに追加します。
pubspec.yaml ファイルに以下を追加します。
記載後、flutter pub getコマンドを実行してパッケージをインストールします。

dependencies:
  flutter:
    sdk: flutter
  flutter_datetime_picker_plus: verを記載

※最新verは公式から確認してください。
https://pub.dev/packages/flutter_datetime_picker/versions

2. 生年月日ピッカーの実装

以下のコードで、生年月日選択用のピッカーを実装できます。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DatePickerExample(),
    );
  }
}

class DatePickerExample extends StatefulWidget {
  const DatePickerExample({Key? key}) : super(key: key);

  @override
  _DatePickerExampleState createState() => _DatePickerExampleState();
}

class _DatePickerExampleState extends State<DatePickerExample> {
  TextEditingController _dateController = TextEditingController();

  void _showDatePicker() {
    DatePicker.showDatePicker(
      context,
      showTitleActions: true,
      minTime: DateTime(1950, 1, 1),
      maxTime: DateTime.now(),
      onConfirm: (date) {
        setState(() {
          _dateController.text = "${date.year}/${date.month}/${date.day}";
        });
      },
      currentTime: DateTime(2000, 1, 1),
      locale: LocaleType.jp, // 日本語に対応
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('生年月日入力')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: TextFormField(
          controller: _dateController,
          readOnly: true,
          decoration: InputDecoration(
            labelText: '生年月日',
            fillColor: Colors.white,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: BorderSide(color: Colors.blue, width: 1.5),
            ),
          ),
          onTap: _showDatePicker,
        ),
      ),
    );
  }
}

まとめ

flutter_datetime_picker を使うことで、ドラムロール式の日付ピッカーを簡単に実装できます。
日本語対応も簡単に行える点やクロスプラットフォームでの生年月日入力UIの統一が可能な点で以前掲載したCupertinoDatePickerより実装が容易だと感じました。

誤りや気になる点ございましたら気軽にコメントお願い致します！