このようなスクロール可能なリスト画面を作成しました。

※全てノーコードで対応できました。

テンプレートを使わないまっさらなプロジェクトを新規作成します。

今回はAPIコールでダミーデータを提供する https://jsonplaceholder.typicode.com/ のAPIを利用してデータを取得しようと思います。

呼び出すAPIは https://jsonplaceholder.typicode.com/postsを使用します

データ型の作成

APIから得られるレスポンスはJSON形式なので、アプリ上でデータとして使用するためのデータ型を作成します。

Webブラウザで API のURL https://jsonplaceholder.typicode.com/posts にアクセスするとレスポンスのJSONデータが得られるので全選択してコピーをして、コピーしたテキストをFlutterFlow側のダイアログのJSON入力欄にペーストします。１つ上にあるname 欄（データ型の名前）には Post と名付けました。

JSONの構造を元にFlutterFlowアプリ内で使用可能なデータ型を作成してくれます。

FlutterFlowを使わない従来のケースでは少なからずエンジニアがソースコードを記述、JSONから変換する処理を実装するのですが、FlutterFlowならたったこれだけで完了です。

次はAPI呼び出しをFlutterFlowに登録します。

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

「Add」をクリックし、Create API Call をクリックします

API  URLには今回利用するAPIのURL  https://jsonplaceholder.typicode.com/posts を指定します。API Name は分かりやすい任意の名前を指定できるのでここでは getPosts としました。

レスポンスデータの設定

Response & Test をクリックするとAPIからのレスポンスをどのように扱うかを設定できます。

• Response & Test をクリック
• Parse as Data Type の横にあるトグルスイッチをONに
• Is List にチェック
• プルダウンを選択

プルダウンをクリックすると「データ型作成」で作成した「Post」というデータ型が選択可能になっているのでそれを選択します。

Isb List にチェックを入れている理由は、APIのレスポンスがリスト形式のためです。こうすることでFlutterFlow では Postデータ型が複数含まれるリストから構成されることを認識してくれるようになります。とても便利です。

APIの動作を確認する

Test API Call をクリックすると実際にAPIをコールしてのテストが行えます。問題がなければ画面のようにレスポンスが得られ 「Status: 200(Success)」と表示されます。

右下の「Add Call」ボタンをクリックして登録完了です。

最後にAPI呼び出しで得たデータを表示するための画面を作成します。

HomePageという空の画面があるので、そこに対して画面を作ろうと思います。

スクロール機能を有効にする

Column ウィジェットに Scrollable という設定項目があるので有効にします。

リスト表示用のウィジェットを追加する

今回はListTileウィジェットを使用し、Columnの子に追加します。（検索ボックスで List と入力すると見つけやすいです）

API呼び出し、レスポンスを変数に格納する設定

Columnを選択、Backend Query タブから「Add Query」ボタンをクリックします。

API Call を選択し

プルダウンから作成したAPI getPosts を選択します。

APIのレスポンスを変数に格納する設定

前述の Backend Query タブの隣にある「Generate Dynamic Children」タブをクリックし、APIのレスポンスを格納する変数を作成します。

今回、VariableNameは postList という名前にしました。

続けて、Value の箇所の設定を行います。右側のペンのアイコンをクリックすると選択項目が表示されるので、APIのレスポンスである「getPosts Response」を選択します。

変更なしで、そのままConfirmをクリックします。

最後に Save のボタンで保存をしてください。以下のような内容になっているかと思います。

これでこの画面を読み込む時にAPIを呼び出して、レスポンスを変数に格納する設定が終わりました。

あとはリストのウィジェットにこのレスポンスのデータを紐づけるだけです。

最後にAPI呼び出しで得られたデータをリストに紐づけて完成です。

先ほど追加したウィジェット「ListTile」を選択します。

TitleとSubtitle にAPIで得られたデータ項目を設定していきます。

Titleへレスポンスデータの項目を紐づけ

Propertiesタブをクリックし、下へスクロールしていくと「Title」というセクションがあります。そのすぐ近くに「Text」、横にアイコンがありますのでアイコンをクリックします。

選択肢が表示されるので、先ほど作詞したAPIのレスポンスを格納した変数「postList 」があるのでそれを選択します。

続けて入力欄が表示されるのでプルダウンメニューから以下のように設定します。ここではAPIレスポンスに含まれる 「title」というデータを使用する、と意味になります。

Titleセクションが以下のように設定が反映されます。

Subtitleへレスポンスデータの項目を紐づけ

「Title」セクションのすぐ下にSubTitleのセクションがありますので、同様の手順でデータを紐づけます。

Subtitleにはデータ項目 「Id」を紐づけました。

表示するリスト項目の個数などの管理はFlutterFlow側でやってくれる

ここまでの手順で紐づけを行えばAPIが返してくれたデータ件数に合わせてFlutterFlowがListTileの表示を行ってくれるようになります。

従来はプログラムコードで管理・ケアが必要ですが、FlutterFlowではノーコードで実現できました。

これまでに実装したことの動作確認するには画面右上のアイコンをクリックします。

FlutterFlowでは、UIのウィジェットを配置して固定のデータを表示するだけでなく、外部から得たデータを簡単に紐づけて動的な画面表示を「簡単にノーコードで実現出来ること」がわかり、ポテンシャルの高さを知ることが出来ました。

ドコドアでは、スクラッチ型アプリの制作をはじめとし、最新の技術を用いたスマートフォンアプリ開発、AI開発、SalesforceをはじめとしたCRM構築など、お客様のニーズに合わせた様々なシステム開発に対応しております。

全国1,600社以上のWeb開発知見とロジックに基づくUI・UXデザインを強みとし、Flutterを用いたiOS・Andrçoidアプリ開発により、一般的なアプリ開発に比べ最大1/2の工数での制作を実現しています。BtoB、BtoC問わず様々な業界・業種での制作実績があり、アプリ開発のみならず要件定義からサービス企画・運用・CSまで、一貫したサポートの提供が可能です。

アプリ開発を検討されている方、アプリ開発会社選びで迷っている方は、お気軽にドコドアへご相談ください。