Установить ширину столбца во флаттере

Мне нужно установить ширину столбца в трепете, мне нужно сделать макет с 3 разделами, нужно быть 20% экрана, а другой - 60%, а последний - 20%. Я знаю, что эти 3 столбца должны быть в строке, но я не знаю, как установить размер, когда я это делаю, 3 столбца имеют одинаковый размер.

Буду признателен за любые отзывы.

Ответ 1

Вместо жесткого определения размера, я бы предложил использовать 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),
        )
      ],
    )

Который будет производить, как показано ниже,

Ответ 2

Вы должны использовать такие контейнеры:

Row(
  children: [
    Container(
      color: Colors.orange,
      child: FlutterLogo(),
      width: 60.0
    ),
    Container(
      color: Colors.blue,
      child: FlutterLogo(),
      width: 60.0    
    ),
    Container(
      color: Colors.purple,
      child: FlutterLogo(),
      width: 60.0
    ),
  ],
)

Ответ 3

Для будущих посетителей ограничение width Column может быть

Ограничивая width самого Column, используйте SizedBox
```
SizedBox(
  width: 100, // set this
  child: Column(...),
)
```

2 (А). Ограничение 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(),
    ),
  ],
)