【Flutter/Dart】日付選択UIの実装方法!showDatePicker/CupertinoDatePickerの使い方

【Flutter/Dart】日付選択UIの実装方法!showDatePicker/CupertinoDatePickerの使い方

この記事からわかること

  • Flutter/Dart日付選択ピッカー実装する方法
  • showDatePicker/CupertinoDatePicker使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

環境

日付選択ピッカーの実装方法

Flutterで日付を選択できるピッカーUIを実装する方法は2つ存在します。両者の実装方法と違いなどをまとめていきたいと思います。

showDatePicker

1つ目の方法はshowDatePickerメソッドを使用する方法です。showDatePickerメソッドを実行するとカレンダーUIのポップアップが表示され、日付を選択することが可能になります。

【Flutter/Dart】日付選択UIの実装方法!showDatePicker/CupertinoDatePickerの使い方

実装方法は簡単でinitialDate初期選択状態となる日付を渡して呼び出すだけです。awaitを使用して選択した日付が取得できるように実装します。

final TextEditingController _dateController = TextEditingController();

void _selectDate(BuildContext context) async {
  DateTime? picked = await showDatePicker(
    context: context,
    // 初期日付
    initialDate: DateTime.now(),
    // 最小選択範囲
    firstDate: DateTime(2000),
    // 最大選択範囲
    lastDate: DateTime(2100),
  );
  if (picked != null) {
    _dateController.text = "${picked.year}/${picked.month}/${picked.day}";
  }
}

※ デフォルトではロケールの設定がされていないため画像のように日本語化されていません。ローカライズの方法は後述しています。

CupertinoDatePicker

2つ目はCupertinoDatePicker Widgetを使用したiOSライクなホイールピッカーを実装する方法です。こちらはWidgetなのでshowModalBottomSheetなどを使用してモーダル表示させるように使用すると使いやすいです。(※ Cupertino(クパチーノ)はiOSスタイルの UIを作るためのWidgetを提供するパッケージです)

【Flutter/Dart】日付選択UIの実装方法!showDatePicker/CupertinoDatePickerの使い方

こちらもinitialDateTime初期選択状態となる日付を渡します。

import 'package:flutter/cupertino.dart';

void _showCupertinoDatePicker(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext builder) {
      return Container(
        height: 250,
        child: CupertinoDatePicker(
          mode: CupertinoDatePickerMode.date,
          initialDateTime: DateTime.now(),
          onDateTimeChanged: (DateTime newDate) {
            print("選択した日付: $newDate");
          },
        ),
      );
    },
  );
}

※ こちらもデフォルトではロケールの設定がされていないため画像のように日本語化されていません

ローカライズ(日本語化)

日付ピッカーをローカライズ(今回は日本語化)するためにはflutter_localizationsパッケージを使用します。(flutter_localization(sなし)というパッケージが「pub.dev」にありますが別物なので注意してください)

まずは以下のコマンドを実行してインストールしておきます。この際にintlがすでに導入済みの場合、バージョンによっては競合エラー(後述)が発生する場合があります。

$ flutter pub add flutter_localizations --sdk=flutter

導入できたらMaterialAppの引数localizationsDelegatessupportedLocalesにそれぞれ値を追加します。supportedLocalesにはローカライズ対象のLocaleをリスト形式で指定すればOKです。今回は日本語化なのでLocale('ja', 'JP')を指定するとピッカーが日本語対応されます。

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Test App',
      localizationsDelegates: [
        // マテリアル Widget(Android)
        GlobalMaterialLocalizations.delegate,
        // 共通 Widget
        GlobalWidgetsLocalizations.delegate,
        // クパチーノ Widget(iOS)
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        // 日本語
        Locale('ja', 'JP'), 
      ],
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: CustomColors.thema),
      ),
      home: HomeRootView(),
    );
  }
}

intlバージョンの競合エラー

intlがすでに導入済みの場合、バージョンによっては競合エラーが発生する場合があります。以下ではintl 0.20.2をすでに導入済みでflutter_localizationsパッケージをインストールしようとするとintl 0.19.0がサポート対象だよと怒られるので、intlのバージョンを下げてあげれば解消します。

ntl is pinned to version 0.19.0 by flutter_localizations from the flutter SDK.
See https://dart.dev/go/sdk-version-pinning for details.


Because every version of flutter_localizations from sdk depends on intl 0.19.0
  and salary depends on intl ^0.20.2, flutter_localizations from sdk is
  forbidden.
So, because salary depends on flutter_localizations from sdk, version solving
  failed.

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index