【FlutterFlow】高さを不規則にして印象的なイメージを表現：StaggeredView
こんにちは～。本日もFlutterFlowの使い方をご紹介してまいります！
今回は、StaggeredViewです。
「スタガ…何それ、食べれるの？焼いた方ががいい？」という声が聞こえてきましたよ。意味が分からないのですね？一緒です♪
Staggeredは、「不安定な、不規則なパターンの」という意味です。ただし、アプリ製作の文脈では、次のようなパターンを指すことが多いみたいですね。高さは同じ、幅が異なる長方形が配置されています。
今回の狙いは、これを画像で実現しようというわけなんです！Pinterestのように。
なんかオシャレに画像が表示できるような気がしてきましたね～。よし、早速やってみよ～。※参考にしますのは、こちらの公式資料です。
追加と同時に、Staggeredな画像が表示！
まず空のページを用意して、その最上位階層にStaggeredViewウィジェットを追加します。
ところで、このStaggeredViewも「サイズ」という概念を持っていないのは、カラム、ロウ、ラップなどと同じです。実践ではコンテナの下に配置した方がいいかもね。
すると、キャンバスにはこう表示されます。どん！
なんかもうできとるやないかい！かっこいいな。
画像ウィジェットは、いずこ？
と、驚いたのもつかの間。まだイメージ・ウィジェットを置いてないですよ？どうやら表示されたのは、「張りぼて」のようです。
であれば、Staggered配下に、子要素として画像を追加しなければ。ということで、いくつか画像を追加します。
すると張りぼては消えて、追加したイメージが代わりに表示されました。うん、いい感じ。
が、しかし。まだ、Staggeredになっていないですね。高さも幅も均一になってます。これはこれできれいですけど、趣旨が違う。
画像のサイズを変更する
では、Staggeredを実現するには、どうすればいいでしょうか？
実は、イメージ・ウィジェットの設定を変更します。イメージを選択して、プロパティでサイズを確認するとデフォルトで100×100になっています。これを削除します！
すべてのイメージの幅と高さを、「カラ」にするとこうなります。あれ～。Staggeredにはなりません…。
はい、ここからがハイライトですよ～。今回は、幅は均一でいいんです。高さにバリエーションを持たせたいんですね？
かくなる上は、いくつかのイメージに異なる高さの値を埋め込みます。100pxとか、300pxとか。するとこうなります。
はい、Staggeredに表示できました～♪。
とりあえず、Staggeredに画像表示できたところで、本日はここまで！今回は、やってみたかったStaggeredViewをご紹介しました。
次回は、Staggeredをもう少しカスタマイズしましょう。
ではまた！
この記事が気に入ったらサポートをしてみませんか？