画面に DropDownウィジェットを追加した直後の状態です。

Define Options 欄で必要な分だけ項目を追加、表示テキストを設定する方法です。

• ドロップダウン項目数が固定で決まっている

場合は、この方法でOKです。

APIコールのレスポンス内容を元に動的にドロップダウン項目を構成する方法です。

APIコールしてレスポンスを格納

例えばレスポンスのデータ構造が以下のような形式の都道府県のデータだとします。

[
  {
    "id": 1,
    "name": "北海道"
  },
  {
    "id": 2,
    "name": "青森県"
  },
  {
    "id": 3,
    "name": "岩手県"
  },
  {
    "id": 4,
    "name": "宮城県"
  },
  :
  :
  :
]

IDと都道府県名からなるリスト構造で、「都道府県名の部分を抽出してドロップダウン項目に設定したい」、というシチュエーションです。

データタイプの作成

idとnameを持つデータタイプを新規作成し、APIコールの設定でレスポンスのJSONを作成したデータタイプとして扱うように設定します。

データタイプ Prefecture を作成

APIのレスポンスを割り当てるデータタイプの設定

APIをコールする

ページ画面の初期化時にAPIをコールするように設定します。

Query Typeは「API Call」、Group of Call Nameは「データ取得する該当のAPI」を選択します。

ドロップダウン項目の調整

固定で「選択肢１、２，３」という項目になっている部分を調整します。

具体的には

「APIで取得したデータ（都道府県のidとnameのリスト）を参照させ、都道府県データの name （都道府県名のテキスト）をドップダウン項目に設定する」

を実現するために、以下の手順で設定を行います。

矢印の箇所をクリックします。

APIコールで選択したAPI名の Response を選択します。

API Response Option 項目を 「As Data Type」、Available Options 項目を「Map List Items」を選択し、矢印部分の「Item in List」をクリックします。

Available Options 項目を「Data Structure Field」を選択し、Select Field 項目を「name」を選択し、Confirmをクリックします。

ドロップダウン項目欄に固定値のテキストから以下のような表示に変わるかと思います。

固定だった「選択肢１，２、３」ではなくAPIのレスポンス内容が反映されました！

この様に外部のAPIから得たデータをドロップダウン項目のテキストに設定することもFlutterFlowではノーコードで実現可能です