Dynamic Children(動的な子どもたち)とは

今回のアプリではDynamic Children ダイナミックチルドレン(動的な子どもたち)を
データーの一覧表示で使いました。
実はあまりよくわかっていなく、あらためて、おさらいです。

公式ページはこちら

まず、そもそも場所が見つけにくいです(汗)!!。下記です

もし、バックアンドクエリをすでに設定していると、これは表示されません。
なのでいったんバックアンドクエリを削除します。
そうすると右隣にハシゴのような表示が現れます。

目次

Dynamic Children ダイナミックチルドレンとは


「リスト型のデータを使って、ウィジェットを自動で複数作る機能」です。
たとえば、商品一覧やユーザーのコメントなど、複数のデータを表示したいときに使います。

どういうときに使うの?

  • FirebaseやAPIから複数のデータを取得したとき
  • アプリの状態(AppState)にリスト型の変数があるとき
  • それを画面に繰り返し表示したいとき

商品リスト、ブログの記事一覧など、繰り返し表示を作成する際に非常に便利です。

FlutterFlowにおける「通常のバックエンドクエリ」と「Dynamic Children」は、どちらもデータベースからデータを取得する機能ですが、その目的と使い方が根本的に異なります。

「通常のバックエンドクエリ」と「Dynamic Children」違いは?

特徴 通常のバックエンドクエリ
 

  • 目的
    特定のウィジェットに単一のデータを紐づける。
  • 表示例
    プロフィール画面でユーザーの名前を表示する。
  • 適用ウィジェット
    ほぼすべてのウィジェット(Text, Image, Containerなど)。
  • データ取得方法
    1つのドキュメントまたはコレクションから特定のデータを取得。
  • 活用事例
    -ユーザーのプロフィール画像を表示する。
    -特定の投稿の詳細を表示する。
    -注文番号を表示する。

Dynamic Children
(動的な子ウィジェットの生成)

  • 目的
    データベースの複数のデータに基づいて、複数のウィジェットを自動生成する。
  • 表示例
    商品リストやニュースフィードなど、繰り返し表示される項目。
  • 適用ウィジェット
    主にリスト表示用のウィジェット(ListView, GridView, Column, Rowなど)。
  • データ取得方法
    コレクション全体を取得し、各ドキュメントごとに子ウィジェットを生成。
  • 活用事例
    -SNSの投稿一覧を表示する。
    – 複数の商品カードを並べて表示する。
    – チャットのメッセージリストを表示する。

詳しい解説

  • 通常のバックエンドクエリ
    これは、ある特定のウィジェットに1つのデータを紐づけるためのものです。たとえば、ユーザーのプロフィールページに表示される「ユーザー名」や「プロフィール画像」は、Firebaseのusersコレクションから特定のユーザーのドキュメント(1件)を取得し、そのデータをTextウィジェットやImageウィジェットに直接バインドします。この場合、1つのウィジェットに対して1つのデータが対応します。
  • Dynamic Children
    これは、データベースのコレクション全体を対象とし、そのデータ件数に応じてウィジェットを自動的に複製・生成する機能です。たとえば、オンラインストアの商品リストを作成する場合、データベースに商品が100個あれば、Dynamic Childrenは100個の「商品カード」ウィジェットを自動的に作成してくれます。各カードウィジェットは、対応する商品データ(商品名、価格、画像など)を動的に表示します。

つまり、通常のバックエンドクエリが「単発のデータ取得」であるのに対し、Dynamic Childrenは「リスト形式のデータ取得とUIの自動生成」という違いがあります。これらを適切に使い分けることで、効率的でデータ駆動型のアプリケーションを開発できます。

目次