1. ホーム
  2. user-interface

フラッターの列幅を設定する

2023-09-23 23:44:09

質問

私は3つのセクションでレイアウトを行う必要があり、1つは画面の20%、他の1つは60%、最後の1つは20%である必要があります。 私はこれらの3つの列が行になるべきであることを知っていますが、私はサイズを設定する方法を知りません、私がそれを行うとき、3つの列は同じサイズを取ります。

何かご意見がありましたら、よろしくお願いします。

どのように解決するのですか?

サイズをハードコーディングする代わりに、私が提案するのは Flex のように

Row(
      children: <Widget>[
        Expanded(
          flex: 2, // 20%
          child: Container(color: Colors.red),
        ),
        Expanded(
          flex: 6, // 60%
          child: Container(color: Colors.green),
        ),
        Expanded(
          flex: 2, // 20%
          child: Container(color: Colors.blue),
        )
      ],
    )

とすると、以下のような出力になります。