【FlutterFlow】GridViewの縦横比を変える方法

FlutterFlow

非常に便利なGridViewですが、使い始めたときにはどうやって縦横比を変更すれば良いかがわからなかったりします。デフォルトでは正方形なのでそこからどうやって縦長や横長のグリッドにするか、もしかすると悩むケースもあるかと思います。(私は最初わかりませんでした)

なので、縦長、横長のグリッドの作り方を紹介します。

GridViewとは

GridViewとは以下のように横に複数行設定するようなデザインを作成するときに利用するウィジェットになります。例えば商品一覧を横2列で表示する際などに利用可能です。

ゴールイメージ

以下のように縦長のグリッドを作成できるようになります。

実装方法

実はめちゃくちゃ簡単です。

縦長にする場合はGridViewのメニュー(右側に表示)のGridView Propertiesの中にあるChild Aspect Ratioを変更します。ゴールイメージのケースでは、Child Aspect Ratioは0.7に設定しています。

これで縦長になります。

逆に横長にしたい場合はChild Aspect Ratioの値を1以上に設定してください。

例えば、Child Aspect Ratioを2.0に設定すると以下のように横長になります。画像がつぶれてしまってますね、、

まとめ

今回はGridViewの縦横比を変更するやり方を解説しました。非常に簡単ですが、最初はどうやればよいかわからないかもしれません。

参考になるとうれしいです。

会社紹介

運営:株式会社Spovisor(スポバイザー)

株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。