[플러터]Flexible과 Expanded 위젯

Row 혹은 Column 일 이용하다보면 사용하게될

Flexible 위젯과 Expanded 위젯에대해서 알아보겠습니다.

플레이그라운드 용으로 sacfold의 body에 다음과 같은 코드를 넣었습니다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(
      height: 100,
      child: Text('Item 1 - pretty big!'),
      color: Colors.red,
    ),
    Container(
      height: 100,
      child: Text('Item 2'),
      color: Colors.blue,
    ),
    Container(
      height: 100,
      child: Text('Item 3'),
      color: Colors.orange,
    ),
  ],
);

어떤 위젯이 Column이나 Row안에 포함되어있을때는

자신이 차지해야할 공간 만큼만 공간을 차지합니다.

하지만 차지해야하는 공간보다 더 공간을 차지하게 하고 싶다면

Flexible로 감싸주면됩니다.

fit parameter로 조정을 해주는데, default는 FlexFit.loose입니다.

그래서 Flexible을 이용할때는 FlexFit.tight을 자주 사용하게 될겁니다.

강제적으로 사용할수 있는 만큼의 공간을 다 차지하게 하는겁니다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(
      height: 100,
      child: Text('Item 1 - pretty big!'),
      color: Colors.red,
    ),
    Flexible(
      fit: FlexFit.tight,
      child: Container(
        height: 100,
        child: Text('Item 2'),
        color: Colors.blue,
      ),
    ),
    Container(
      height: 100,
      child: Text('Item 3'),
      color: Colors.orange,
    ),
  ],
);

파란색 Container 위젯이 늘어난것을 볼수 있죠

그러면 children에 Flexible 위젯이 여러개일때는 어떨까요?

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(
      height: 100,
      child: Text('Item 1 - pretty big!'),
      color: Colors.red,
    ),
    Flexible(
      fit: FlexFit.tight,
      child: Container(
        height: 100,
        child: Text('Item 2'),
        color: Colors.blue,
      ),
    ),
    Flexible(
      fit: FlexFit.tight,
      child: Container(
        height: 100,
        child: Text('Item 3'),
        color: Colors.orange,
      ),
    ),
  ],
);

먼저 빨강 색에게 공간을 할당하고

나머지 공간을 파랑과 주황이 나눠 가져갑니다. 이때 둘이 반반씩 나눠가지고 있어요

그런데 파란색이 주황색의 두배만큼 가져가게 할수 있을까요?

flex를 지정해주면됩니다. flex는 default가 1로 주어집니다.

return Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(
      height: 100,
      child: Text('Item 1 - pretty big!'),
      color: Colors.red,
    ),
    Flexible(
      flex: 2,
      fit: FlexFit.tight,
      child: Container(
        height: 100,
        child: Text('Item 2'),
        color: Colors.blue,
      ),
    ),
    Flexible(
      fit: FlexFit.tight,
      child: Container(
        height: 100,
        child: Text('Item 3'),
        color: Colors.orange,
      ),
    ),
  ],
);

Row는 child의 flex값을 모두 더한뒤에 나눠주는겁니다.

위의 경우에는 2+1 = 3을 하고

2/3 그리고 1/3을 가져가게되는거죠

그렇다면 이번에는 주황색만 fit을 FlexFit.loose을 주게되면 어떻게 될까요?

파랑색은 여전히 전과 같이 남겨진 부분의 2/3을 가져간만큼 차지하고 있어요. FlexFit.tight니까 강제로 늘리고 있어요.

그런데 주황색은 FlexFit.loose니까 필요한 공간만 차지하고있어요

그러면 남은 1/3은 어디로 갔을까요?

mainAxisAlignment: MainAxisAlignment.spaceAround,

mainAxisAlignment: MainAxisAlignment.spaceAround,

로 인해 각 child주변의 공간으로 동등하게 나눠졌습니다. (지금 하얀색으로 비어있는 부분!)

이제 주황색의 FlexFit.loose는 그대로 두고 flex값을 2로 높이면 어떻게 될까요?

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(
      height: 100,
      child: Text('Item 1 - pretty big!'),
      color: Colors.red,
    ),
    Flexible(
      flex: 2,
      fit: FlexFit.tight,
      child: Container(
        height: 100,
        child: Text('Item 2'),
        color: Colors.blue,
      ),
    ),
    Flexible(
      flex: 2,
      fit: FlexFit.loose,
      child: Container(
        height: 100,
        child: Text('Item 3'),
        color: Colors.orange,
      ),
    ),
  ],
);

파랑색은 이제 남겨진 부분의 2/4을 가져간만큼 차지하고 있어요

그리고 주황색은 변함 없이 필요한 공간만 차지하고있어요

지금까지 Flexible을 알아봤는데,

Expanded는 뭘까요?

간단하게 말해서 Flexible인데 fit이 FlexFit.tight로 고정된 위젯입니다.

한번 차이점을 알아볼까요?

이번에는 예제를 살짝 바꿔볼게요

Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Container(
          height: 100,
          child: Text('Item 1 - pretty big!'),
          color: Colors.red,
        ),
        Container(
          height: 100,
          child: Text('이번에 여기에 엄청나게 긴 글이 있으면 어떻게될까요?'),
          color: Colors.blue,
        ),
        Container(
          height: 100,
          child: Text('Item 3'),
          color: Colors.orange,
        ),
      ],
    );

그러면 Text가 너무 길어서 이렇게 에러가 뜨겠죠

이때 파랑과 주황을 Expanded로 감싸주면

Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Container(
          height: 100,
          child: Text('Item 1 - pretty big!'),
          color: Colors.red,
        ),
        Expanded(
          child: Container(
            height: 100,
            child: Text('이번에 여기에 엄청나게 긴 글이 있으면 어떻게될까요?'),
            color: Colors.blue,
          ),
        ),
        Expanded(
          child: Container(
            height: 100,
            child: Text('Item 3'),
            color: Colors.orange,
          ),
        ),
      ],
    );

그리고

Flexible로 감싸주면

Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Container(
          height: 100,
          child: Text('Item 1 - pretty big!'),
          color: Colors.red,
        ),
        Flexible(
          child: Container(
            height: 100,
            child: Text('이번에 여기에 엄청나게 긴 글이 있으면 어떻게될까요?'),
            color: Colors.blue,
          ),
        ),
        Flexible(
          child: Container(
            height: 100,
            child: Text('Item 3'),
            color: Colors.orange,
          ),
        ),
      ],
    );
  }

ps.

마지막으로 위 상황에서

텍스트를 한줄에 딱 맞게 하고 싶으면

Container위젯을 FittedBox 위젯으로 감싸주면됩니다.