Flutterで非同期で格子状に画像とテキストを表示する方法

Question

Flutterド素人です。

Flutterでアプリを開発しており、以下画像のようなレイアウトを組みたいと考え、試行錯誤しております。

画像に手書きしたとおり、格子状にタイルのようなものを配置し、そのタイルには画像とテキスト（画像中ではImageとTitleとしています）を（恐らくColumnで）配置します。タイルの数はFirestoreに登録したドキュメントの数分になります（登録した分だけ増えていく予定です）。

このようなレイアウトを考えている中で、以下のような実装を考えています。

1. 格子状のレイアウトはGridView.builderで組む
2. 各タイルはGridViewのitemBuilderに、Firestoreから取得した各ドキュメントから取り出したImage（String型のURLなのでHTTP Getが別途、必要）とTitle（String型）をContainerに配置して渡す

のような流れかと思うのですが、ググって調べてみると、Firestoreからドキュメントを取得してタイル状に表示する実装はStreamBuilderを使う方が良いようにも思え、また、StreamBuilderを使う場合、StreamBuilderで非同期に取得した各ドキュメントを随時、Containerに配置して表示し、且つ、Imageも非同期でgetするような処理が必要かと思いますが、私にはかなり複雑な処理に思え、実装が進んでいないのが現状です。

もしサンプル実装など踏まえ、部分的にでもご教示いただければ幸いです。
よろしくお願い致します。

Answer 1

以下、自己解決したのでコードを掲載します。同様なことでお困りの方がいらっしゃれば参考にしてみてください。

           StreamBuilder(
                stream: Firestore.instance.collection('books').snapshots(),
                builder: (BuildContext context,
                    AsyncSnapshot<QuerySnapshot> snapshot) {
                  if (!snapshot.hasData)
                    return Center(
                      child: CircularProgressIndicator(),
                    );

                  return GridView.builder(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2),
                    itemCount: snapshot.data.documents.length,
                    padding: EdgeInsets.all(2.0),
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                        child: GestureDetector(
                            onTap: () {
                              Navigator.of(context).pushNamed('/book_detail');
                            },
                            child: Column(
                              children: <Widget>[
                                Image(
                                  image: AdvancedNetworkImage(
                                    snapshot.data.documents[index]['thumbnail'],
                                    useDiskCache: true,
                                    cacheRule: CacheRule(
                                        maxAge: const Duration(days: 7)),
                                  ),
                                  fit: BoxFit.cover,
                                ),
                                Text(snapshot.data.documents[index]['title']),
                              ],
                            )),
                        padding: EdgeInsets.all(2.0),
                      );
                    },
                  );
                }),