【Flutter】AspectRatioの使い方

AspectRatio

子ウィジェットを指定した縦横比で表示するウィジェット。

SizedboxやContainerと異なる点は、縦横比を指定して子ウィジェットを表示する点。

api.flutter.dev

---

使い方

文法

AspectRatio(
            aspectRatio:  ..., // 横サイズ / 縦サイズ 
            child: ... , // 表示したいウィジェット
),

• aspectRatio : 横サイズ÷縦サイズの値が入る。よくある書き方は「 16 / 9 」など。
• child : 表示したいウィジェット

例

以下で縦横比を変化させて例を示す。

aspectRatio : 1 / 1

AspectRatio(
    aspectRatio: 1 / 1,
    child: Container(
      color: Colors.brown,
    )),

aspectRatio : 1.618 / 1 ( 黄金比 )

  AspectRatio(
    aspectRatio: 1.618 / 1,
    child: Container(
      color: Colors.brown,
    )),

aspectRatio : 1 / 3

AspectRatio(
    aspectRatio: 1 / 3,
    child: Container(
      color: Colors.brown,
    )),