![見出し画像](https://assets.st-note.com/production/uploads/images/103626442/rectangle_large_type_2_0272a01b081fcdb6121284096f39cb1d.png?width=1200)
【FlutterFlow】高さを不規則にして印象的なイメージを表現:StaggeredView
こんにちは~。本日もFlutterFlowの使い方をご紹介してまいります!
今回は、StaggeredViewです。
「スタガ…何それ、食べれるの?焼いた方ががいい?」という声が聞こえてきましたよ。意味が分からないのですね?一緒です♪
Staggeredは、「不安定な、不規則なパターンの」という意味です。ただし、アプリ製作の文脈では、次のようなパターンを指すことが多いみたいですね。高さは同じ、幅が異なる長方形が配置されています。
![](https://assets.st-note.com/img/1682108108459-aA5wwAcuFv.png?width=1200)
今回の狙いは、これを画像で実現しようというわけなんです!Pinterestのように。
![](https://assets.st-note.com/img/1682108624010-0yWgxYJ5jE.png)
なんかオシャレに画像が表示できるような気がしてきましたね~。よし、早速やってみよ~。※参考にしますのは、こちらの公式資料です。
追加と同時に、Staggeredな画像が表示!
まず空のページを用意して、その最上位階層にStaggeredViewウィジェットを追加します。
![](https://assets.st-note.com/img/1682108967452-XMIZ9xJKYg.png)
ところで、このStaggeredViewも「サイズ」という概念を持っていないのは、カラム、ロウ、ラップなどと同じです。実践ではコンテナの下に配置した方がいいかもね。
すると、キャンバスにはこう表示されます。どん!
![](https://assets.st-note.com/img/1682109311074-2Dtbfqfx36.png)
なんかもうできとるやないかい!かっこいいな。
画像ウィジェットは、いずこ?
と、驚いたのもつかの間。まだイメージ・ウィジェットを置いてないですよ?どうやら表示されたのは、「張りぼて」のようです。
であれば、Staggered配下に、子要素として画像を追加しなければ。ということで、いくつか画像を追加します。
![](https://assets.st-note.com/img/1682109660418-YxpwckZIkr.png)
すると張りぼては消えて、追加したイメージが代わりに表示されました。うん、いい感じ。
![](https://assets.st-note.com/img/1682109706096-XH6pl6OjEk.png)
が、しかし。まだ、Staggeredになっていないですね。高さも幅も均一になってます。これはこれできれいですけど、趣旨が違う。
画像のサイズを変更する
では、Staggeredを実現するには、どうすればいいでしょうか?
実は、イメージ・ウィジェットの設定を変更します。イメージを選択して、プロパティでサイズを確認するとデフォルトで100×100になっています。これを削除します!
![](https://assets.st-note.com/img/1682109902684-zJlheIkZUZ.png)
すべてのイメージの幅と高さを、「カラ」にするとこうなります。あれ~。Staggeredにはなりません…。
![](https://assets.st-note.com/img/1682110093005-VFWB2fcJJO.png)
はい、ここからがハイライトですよ~。今回は、幅は均一でいいんです。高さにバリエーションを持たせたいんですね?
かくなる上は、いくつかのイメージに異なる高さの値を埋め込みます。100pxとか、300pxとか。するとこうなります。
![](https://assets.st-note.com/img/1682110371332-34Ig7luM2F.png)
はい、Staggeredに表示できました~♪。
とりあえず、Staggeredに画像表示できたところで、本日はここまで!今回は、やってみたかったStaggeredViewをご紹介しました。
次回は、Staggeredをもう少しカスタマイズしましょう。
ではまた!
この記事が気に入ったらサポートをしてみませんか?