今回のブログでは、ノーコード開発プラットフォームであるFlutterFlowを使って、ドロップダウンリストから都道府県を選択する機能を作ってみたいと思います。
Webアプリケーションやモバイルアプリケーションにおいて、ユーザーが選択する項目をドロップダウンリストで提供することは一般的です。
今回は、FlutterFlowを使って、都道府県をドロップダウンリストから選択できる機能を作成します。FlutterFlowを使うことで、手軽にドロップダウンリストを実装できます。詳しい手順を紹介していきますので、一緒に作っていきましょう。
そもそもまずFlutterFlowの概要を知りたい方はこちら
エレメントからドロップダウンリスト「DropDown」を選択する
今回はマイページ編集画面に都道府県を選択する機能の例で説明してみます。
まずはドロップダウンリストを配置しましょう。エレメントの追加から検索するとすぐに見つかるのでそれを配置します。
データベース側の設定
次に、データベースの設定をしましょう。都道府県（prefectures）のコレクションを作成します。ソート順と都道府県名（prefecture_name）の項目だけ持たせてます。
次に、User側に都道府県を設定できるようにしたいので、prefecure_nameを設定します。以下のような感じですね。
今度はデータの投入です。Databaseの画面のManage Contentから以下のようなページにいけるので、prefecturesを選択しデータ登録をしましょう。CSVでのアップロードも可能です。
（firebaseから直接データ更新しても大丈夫です）
User側も同様に、Usersを選択しそれぞれのユーザーにprefecture_nameを追加してあげましょう。
ドロップダウンリストと初期値の設定
まずはドロップダウンリストに表示するためデータベースから情報を持ってきましょう。
以下のようにドロップダウンリストのところのBackend Queryからprefecturesを選択しましょう。
次に、ドロップダウンリストの表示側の設定です。Define Optionsから「prefectures Documents」を選択します。（さっきbackend queryでとってきたやつですね）
以下のような感じです。
次に、Initial Configurationの設定です。編集画面なのですでに設定済みの都道府県があったらそれを表示したいので、Authenticated Userのprefecture_nameを表示できるようにします。
登録ボタン押下時のActionにデータベース更新の設定
最後はActionの設定です。Update Documentのprefecture_nameにwidgetのdropdownを設定してあげましょう。
これで完成です！
これだけで以下のようにドロップダウンリストができました。
FlutterFlowのドロップダウンリスト機能をYoutube動画で確認したい方はこちら
FlutterFlowは複雑なため、動画で見た方が早いことも多いため、動画にもまとめてみました。
この記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。