flutter Expanded와 Flexible 간단 정리

child: Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.max,
  children: [
    // Expanded, Flexible, Row나 Column 위젯의 children에서만 사용이 가능하다.
    // Expanded - 남아있는 공간을 전부 차지한다. 만약 4개의 위젯이 전부 Expanded로 되어 있다면, 1/4 공간을 각각 차지하게 된다.
    // Expanded-> flex - flex는, 비율을 뜻한다. 만약 4개의 Expanded 위젯에 flex를 각각 2,3,2,2로 하면, 전체 공간의 2:3:2:2 비율을 가지게 된다.
    // Flexible - 비율만큼 공간을 차지하지만, 만약에 child 안에 있는 위젯이 공간을 다 차지하지 않으면 나머지 공간을 버린다.
    // Flexible-> flex - 공간을 버리는 비율이다. 만약 flex를 2로 설정하면 2배 더 공간을 버리게 된다.
    Flexible(
      child: Container(
        width: 50.0,
        height: 50.0,
        color: Colors.red,
      ),
    ),
    Flexible(
      child: Container(
        width: 50.0,
        height: 50.0,
        color: Colors.orange,
      ),
    ),
    Expanded(
      child: Container(
        width: 50.0,
        height: 50.0,
        color: Colors.yellow,
      ),
    ),
    Expanded(
      child: Container(
        width: 50.0,
        height: 50.0,
        color: Colors.green,
      ),
    ),
  ],
),

Expanded, Flexible는 Row나 Column 위젯의 children에서만 사용이 가능하다.

 

Expanded - 남아있는 공간을 전부 차지한다. 만약 4개의 위젯이 전부 Expanded로 되어 있다면, 1/4 공간을 각각 차지하게 된다.

 

Expanded-> flex - flex는, 비율을 뜻한다. 만약 4개의 Expanded 위젯에 flex를 각각 2,3,2,2로 하면, 전체 공간의 2:3:2:2 비율을 가지게 된다.

 

Flexible - 비율만큼 공간을 차지하지만, 만약에 child 안에 있는 위젯이 공간을 다 차지하지 않으면 나머지 공간을 버린다.

 

Flexible-> flex - 공간을 버리는 비율이다. 만약 flex를 2로 설정하면 2배 더 공간을 버리게 된다.