技術記事

micomia株式会社の井上です。

今日はFlutterFlowで日付の入力をする方法について解説していきます。

1.日付入力の機能実装方法

このように日付の入力画面があったとします。

「日付を選択する」ボタンを押して日付を選択後、上のtext(現在はHello Worldと表示)に日付を表示させるイメージです。今回は、2025-10-29を表示させていきます。

まず、日付を選択してもらうにはDate/Time PickerというActionを実装します。

2. 入力した日付の表示方法

Date/Time Pickerを実装できたら、次は上のtextに選択した日付が表示できるように実装していきます。

textのInitial ValueにWidget StateからDate Pickedを選択します。

すると、何を表示させるかの選択肢が出てくるので今回はDate Time Formatを選択します。

ちなみに、下にあるDateTime to Unix Timestampはその日付が1970年1月1日から何ミリ秒経過しているかを表示させることになります。

次に、DateTime Format Optionを選択します。

日付を入力する際の形式として、yyyyは年、MMは月、ddは日付を表しています。ちなみに、時間はHH、分はmmで表すことができます。

今回は2025-10-29と表示させたいので、yyyy-MM-ddをフォーマットとして使用します。

選択肢の中にはないので、Customを選択します。

すると、Custom Formatを入力する欄が現れるのでここに先ほどのyyyy-MM-ddを入力します。

入力すると、Previewにも同じ形式で表示されているのでこのままConfirmを押します。

この状態でテストをしてみます。

Date/Time Pickerで10月29日を選択して、

OKを押すと、無事日付が表示されました。

3. 最後に

日付選択は少し複雑な部分もありますが、多くの場面で使用する機能なのでうまく活用していきましょう。

動画でもっと知りたい方はこちら