web-dev-qa-db-ja.com

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

列の幅をフラッターで設定する必要があり、3つのセクションでレイアウトを行う必要があります。1つは画面の20％、もう1つは60％、最後の1つは20％です。これら3つの列を1行に配置する必要があることは知っていますが、サイズを設定する方法がわかりません。その場合、3つの列は同じサイズになります。

フィードバックをお待ちしています。

user-interfacedartflutter
13
Joseph Arriaza

サイズをハードコーディングする代わりに、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),
        )
      ],
    )

以下のようになります enter image description here

47
Dinesh Balasubramanian

将来の訪問者に対して、widthのColumnを制限することは

  1. widthのColumn自体を制限するには、SizedBoxを使用します

    SizedBox(
  width: 100, // set this
  child: Column(...),
)

2（A）。 width内のchildrenの制限Column内、ハードコーディング値なし

Column(
  children: <Widget>[
    Expanded(
      flex: 3, // takes 30% of available width 
      child: Child1(),
    ),
    Expanded(
      flex: 7, // takes 70% of available width  
      child: Child2(),
    ),
  ],
)

2（B）。 width内のchildrenの制限Column内、ハードコーディング値を使用。

Column(
  children: <Widget>[
    SizedBox(
      width: 100, // hard coding child width
      child: Child1(),
    ),
    SizedBox(
      width: 200, // hard coding child width
      child: Child2(),
    ),
  ],
)
1
CopsOnRoad