技術記事

micomia株式会社の井上です。今回はGridViewについて解説していきます。

初心者にも分かりやすく解説していくのでぜひご一読ください。

1. GridViewとは？

Gridというのは日本語だと格子状のものを指します。その言葉の通り、FlutterFlowでも格子状に表示されるようになるのがGridViewです。

一番分かりやすいイメージはInstagramの投稿一覧やフリマアプリです。同じ要素(Instagramやフリマアプリなら画像)が繰り返し並んでいる状態になります。

今回はそちらと同じように投稿画像を複数表示させるように実装していきます。

2. GridViewの実装方法

GridViewは、Scaffoldの部分にGridViewというWidgetを追加することで実装できます。

このGridViewの子要素として、このようにImageを複数追加して表示させることも可能です。

ですが、今回は投稿画像を表示させる=半永久的に画像が増えていくので、このままだと画像を投稿するたびにImage Widgetを追加していくことになります。

なので今回はデータベースを使用して投稿画像が複数枚表示できるように実装していきます。

すでに投稿に使用するコレクションを作られている方はimageを追加してください。Data TypeはImage Pathを使用します。

追加できたらGridViewの方に戻って、Backend Queryを追加します。

今回は投稿画像を複数枚表示させたいので、Query Collectionを選択します。

投稿画像を表示させるのでCollectionはpostを選択します。

この状態でConfirmを押します。

表示させる画像の順番を指定したかったり、フィールターをかけたい場合はConfirmを押す前にFiltersやOrderingのところから設定してください。

これで、GridViewにQuery Collectionが追加されたので、子要素として1つImageを追加してみます。するとこのようにImageが連続して表示されるようになりました。

今入っている画像のPathを見てみると、

このようにURLが指定された状態になっているので、このままだとどれだけ画像を追加してもこの画像だけが表示されるようになっています。

なので、先ほどデータベースに追加したImageを指定します。

これで、投稿された画像が表示されるようになります。

このままだと何も表示されないので、投稿作成画面などでデータベースの中にデータを入れる処理は必要ですが、それができるとこのGridViewに表示されるようになります。

3. GridViewの詳細設定

右側のパネルにある詳細設定を見ていきます。GridView特有の設定はGridView Propertiesの部分にあります。

まず、Cross Axis Countは横並びに表示されるWidget(今回であればImage)の数を設定することができます。

試しに、6にしてみるとこのように表示されます。現在は作成したデータがないので例として4つまでしか表示されていませんが、実際は横に6つ表示されるようになります。

次に、その横にあるCross Axis Spacingです。

これは子要素同士の左右に間隔を設定できます。試しに0にしてみると、

このように左右の間隔がなくなりました。

次にMain Axis Spacingです。これもCross Axis Spacingと似たものですが、Main Axis Spacingは上下の間隔を設定できます。

こちらも0にしてみると、

上下の間隔も無くなりました。

次に、その隣にあるChild Aspect Ratioです。これは子要素の縦横の比率(アスペクト比)を設定できます。

例えば、画像を縦長に表示したいとき、1以下の値にすると

このように縦長になります。

その下にあるStart Spacing, End Spacingは他のWidgetを同じくGridView自体の上下の間隔を設定できます。

4. さいごに

今回はGridViewについて解説していきました。投稿の表示方法としては、タイトルや本文を表示する方法と今回のようにGridViewを使用して画像を全面に表示させる方法がメジャーな方法になっています。目的に合うようにGridViewも活用していきましょう。

本記事の内容を動画で見たい方は以下をご覧ください。

動画でもっと知りたい方はこちら