%3Cbr%3Emicomia株式会社の井上です。今回はDate/Time Pickerについて解説していきます。初心者にもわかりやすく解説していくのでぜひご一読ください。%3Cbr%3E%3Cbr%3E%3Cbr%3E%3Cbr%3E1. Date/Time PickerとはDate/Time Pickerは日付、時間を選択するためのものです。プロフィール作成時の生年月日を入力する際によく使用されます。%3Cbr%3E%3Cbr%3E2. Date/Time Pickerの使い方今回は、以下のようにセットしたcontainerをタップすることでDate/Time Pickerを使えるようにします。%3Cbr%3E%3Cbr%3EActionsとしてDate/Time Pickerを選択します。%3Cbr%3E%3Cbr%3EDate/Time Picker Typeは、Date=日付のみDate+Time=日付＋時間Time=時間のみのいずれかのタイプを選択することができます。%3Cbr%3E%3Cbr%3Eその下にあるDefault Date/TimeはDate/Time Pickerを開いた時に表示されるデフォルトの時間を設定できます。これは特にこだわりがない限りCurrent Type(その時の時刻)のままで問題ありません。%3Cbr%3E%3Cbr%3EMinimum Date/TimeとMaximum Date/Timeは選択できる日時の範囲を制限することができます。%3Cbr%3E%3Cbr%3EAllow Past DateはONにすると過去の日付を選択可能になり、Allow Future Dateは未来の日付が選択可能になります。例えば、生年月日の入力を求める際、今が2025年だとすると2026年生まれは存在していないのでAllow Future DateはOFFにしておくのが適切です。%3Cbr%3E%3Cbr%3EUse Cupertino-styleはONにするとiOSのスタイルでDate/ Time Pickerを起動することができます。Androidのスタイル(Flutterが用意しているデフォルトのスタイル)のものを使用したい場合はUse Cupertino-styleをOFFにしてその下のUse Default ThemeをONにしてください。%3Cbr%3E%3Cbr%3Eまた、iOSのスタイルを採用しているとAppearance Propertiesからカラーなどの詳細設定ができます。%3Cbr%3E%3Cbr%3Eこれで一通りの設定は完了したので次は表示の設定です。今回は以下のように追加したTextに先ほどのDate/Time Pickerで選択した日付が表示されるようにします。%3Cbr%3E%3Cbr%3ETextの変数としてDate/Pickedを選択することで表示されるようになります。%3Cbr%3E%3Cbr%3EAvailable OptionsではDateTime Formatを使用することが一般的です。%3Cbr%3E%3Cbr%3EDateTime Format Optionsではお好みのスタイルを選択できます。選択肢の中にない場合はCustomを選択します。%3Cbr%3E%3Cbr%3Eyyyyで西暦、MMで月、ddで日付を表示することができるのでお好みのスタイルを入力してください。今回はyyyy/MM/ddで設定します。%3Cbr%3E%3Cbr%3Eここまで設定できたらConfirmを押すと内容が反映されます。%3Cbr%3E%3Cbr%3E%3Cbr%3E3. さいごに今回はDate/Time Pickerについて解説していきました。日付の入力は意外と使われる場面が多いものなのでぜひ本記事を参考に実装してみてください。%3Cbr%3E本記事の内容を動画で観たい方は以下をご覧ください。%3Cbr%3E%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FvSdhgqU2xrA%3Fsi%3DY8UmsUYfTAv99gHn%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3E%3C%2Fiframe%3E%3Cbr%3E