[Flutter] 플러터 Expanded? 익스펜디드 Flexible? 플렉서블

Expanded는  Flexible위젯의 fit옵션이 FlexFit.tight로 고정된 위젯이다.

class Expanded extends Flexible {
    const Expanded({
        Key key,
        int flex = 1,
        @required Widget child,
    }) : super(
        key: key, 
        flex: flex, 
        fit: FlexFit.tight, 
        child: child
    );
}

Flexible위젯이 Expanded위젯보다 옵션 설정이 더 디테일 할뿐이다.

Expanded( child: Foo(), );

Flexible( fit: FlexFit.tight, child: Foo(), );

결과는 같다. 

여러가지 에제로 위젯의 사용법을 보자~~

주의  Flexible위젯 or Expanded위젯은 반드시 Column() , Row() 위젯 안에서 사용해야한다.

 

1. Flexible 위젯

예제 1. 기본 컨테이너로만 구성했을 때

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(
      height: 100,
      child: Text('Containier 1 텍스트는 길게 해보자'),
      color: Colors.red,
    ),
    Container(
      height: 100,
      child: Text('Containier 2'),
      color: Colors.blue,
    ),
    Container(
      height: 100,
      child: Text('Containier 3'),
      color: Colors.orange,
    ),
  ],
);
  }
}

결과

 

예제 2. FlexFit.tight 사용

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(
      height: 100,
      child: Text('Containier 1 텍스트는 길게 해보자'),
      color: Colors.red,
    ),
    Flexible(
      fit: FlexFit.tight,
      child:
      Container(
        height: 100,
        child: Text('Containier 2'),
        color: Colors.blue,
      ),
    ),
    Container(
      height: 100,
      child: Text('Containier 3'),
      color: Colors.orange,
    ),
  ],
);
  }
}

결과

강제적으로 사용 할 수 있는 공간을 다 차지하게 한다.

 

예제 3.  여러곳에 FlexFit.tight 사용하기

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(
      height: 100,
      child: Text('Containier 1 텍스트는 길게 해보자'),
      color: Colors.red,
    ),
    Flexible(
      fit: FlexFit.tight,
      child:
      Container(
        height: 100,
        child: Text('FlexFit.tight 1'),
        color: Colors.blue,
      ),
    ),
   Flexible(
      fit: FlexFit.tight,
      child:
    Container(
      height: 100,
      child: Text('FlexFit.tight 2'),
      color: Colors.orange,
    ),
   ),
  ],
);
  }
}

결과

먼저 첫번째 빨간색 컨테이너에게 공간을 할당하고 나머지 공간을 파랑과 주황이 나눠 가진다.  

그런데 파란색이 주황색의 두배만큼 가져가게 하려면 flex값을 지정해주면된다. flex는 default가 1이다.

    Flexible(
      fit: FlexFit.tight,
      flex : 2,
      child:
      Container(
        height: 100,
        child: Text('FlexFit.tight 1'),
        color: Colors.blue,
      ),
    ),

결과

Row는 child의 flex값을 모두 더한뒤에 나눈다. 위의 경우에는 2+1 = 3을 하고 2/3 그리고 1/3을 가져 간다.

 

에제 4. 주황색만 fit을 FlexFit.loose을 사용

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(
      height: 100,
      child: Text('Containier 1 텍스트는 길게 해보자'),
      color: Colors.red,
    ),
    Flexible(
      fit: FlexFit.tight,
      flex : 2,
      child:
      Container(
        height: 100,
        child: Text('FlexFit.tight 1'),
        color: Colors.blue,
      ),
    ),
   Flexible(
      fit: FlexFit.loose,
      child:
    Container(
      height: 100,
      child: Text('FlexFit.tight 2'),
      color: Colors.orange,
    ),
   ),
  ],
);
  }
}

결과

파랑색은 FlexFit.tight으로 강제로 늘리기 때문에 여전히 전과 같이 남겨진 부분의 2/3을 가져간만큼 차지하고 있다.

주황색은 FlexFit.loose니까 필요한 공간만 차지하고 있다. 그러면 남은 1/3은 

mainAxisAlignment: MainAxisAlignment.spaceAround 옵션으로 인해 child주변의 공간으로 동등하게 나눠졌다.

 

주황색의 FlexFit.loose는 그대로 두고 flex값을 2로 했을때

   Flexible(
      fit: FlexFit.tight,
      felx : 2,
      child:
    Container(
      height: 100,
      child: Text('FlexFit.tight 2'),
      color: Colors.orange,
    ),
   ),

파랑색은 이제 남겨진 부분의 2/4을 가져간만큼 차지하고 있다. 그리고 주황색은 변함 없이 필요한 공간만 차지하고있다.

 

2. Expanded 위젯

예제 1. 컨테이너 안의 텍스트를 아주 길게 입력해보기

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(
      height: 100,
      child: Text('Containier 1'),
      color: Colors.red,
    ),
    Container(
        height: 100,
        child: Text('Containier 2 텍스트는 아주 길게 해보자 과연 어떤 결과? @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ '),
        color: Colors.blue,
    ),
    Container(
      height: 100,
      child: Text('Containier 3'),
      color: Colors.orange,
    ),
  ],
);
  }
}

결과

픽셀 오버플로우 에러가 발생한다. 지정한 영역보다 표시할 내용이 넘치면 발생하는 에러다. (일명: 횡단보도 에러..)

이 에러를 해결하려면 간단하게 Expanded 위젯으로 감싸주면 된다.

    Expanded(
    child: 
      Container(
        height: 100,
        child: Text('Containier 2 텍스트는 아주 길게 해보자 과연 어떤 결과? @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ '),
        color: Colors.blue,
      ),
    ),

결과

Expanded로 감싸주면 텍스트가 넘쳐도 개행이 된다. 아까 횡단보도 에러는 발생하지 않는다.

 

주황색도 Expanded를 감싸보자

    Expanded(
    child: 
      Container(
        height: 100,
        child: Text('Containier 2 텍스트는 아주 길게 해보자 과연 어떤 결과? @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ '),
        color: Colors.blue,
      ),
    ),
    Expanded(
    child: 
      Container(
        height: 100,
        child: Text('Containier 3'),
        color: Colors.orange,
      ),
    ),

결과

파란색과 주황색의 영역이 같아진다.

 

결론

간단하게 위젯의 텍스트가 넘치는 것을 방지하려면 > Expanded

디테일하게 영역을 설정하려면 > Flexible

 

포스팅의 참조

https://mike123789-dev.tistory.com/entry/%ED%94%8C%EB%9F%AC%ED%84%B0Flexible%EA%B3%BC-Expanded-%EC%9C%84%EC%A0%AF

https://stackoverflow.com/questions/52645944/flutter-expanded-vs-flexible