[Flutter] Expanded vs Flexible

Expanded : Row, Column, Flex에서 mainAxis 방향으로 남은 공간 만큼 자식의 크기를 확장

Scaffold(
  body: Row(
    children: <Widget>[
      Expanded(flex: 1, child: Container(color: Colors.red, height: 50)),
      Expanded(flex: 2, child: Container(color: Colors.blue, height: 50)),
      Container(color: Colors.yellow, width: 50, height: 50),
    ],
  ),
)

 

Flexible : Expanded의 조상 클래스.

fit 속성값이 FlexFit.loose일 경우, 설정된 크기보다 더 커질 수 없도록 크기에 제한이 걸림

Scaffold(
  body: Row(
    children: <Widget>[
      Expanded(
          flex: 1, child: Container(color: Colors.red, height: 50)),
      Flexible(
          fit: FlexFit.loose,
          flex: 2,
          child: Container(color: Colors.blue, width: 70, height: 50)), // width가 최대 70으로 제한됨.
      Container(color: Colors.yellow, width: 50, height: 50),
    ],
  ),
)