Flutter[플러터] / Flexible 를 사용하여 비율에 맞춰 확장하기(크기 오류, 플렉스, 사이즈, 유연, hasSize) Flexible (Flutter Widget of the Week)

Flexible class

Row , Column 또는 Flex 의 자식이 어떻게 구부러지는지 제어하는 ​​위젯입니다.

Flexible 위젯을 사용하면 Row, Column 또는 Flex 의 자식 위젯이 주 축의 사용 가능한 공간을 채우도록 확장할 수 있는 유연성을 제공합니다(예: Row 의 경우 수평으로, Column 의 경우 수직으로 ). 하지만 Expanded 와 달리 Flexible 은 자식 위젯이 사용 가능한 공간을 채울 것을 요구하지 않습니다.

Flexible 위젯 은 Row , Column, Flex 의 자손이어야 하며, Flexible 위젯에서 이를 둘러싼 Row , Column , Flex 까지의 경로에는 StatelessWidget 이나 StatefulWidget 만 포함되어야 합니다 ( RenderObjectWidget 과 같은 다른 종류의 위젯은 제외 ).

https://youtu.be/CI7x0mAZiY0

예제 코드

 

---

Flexible 은 Row, Column, Flex 이런 위젯 안에서 자식이 남은 공간을 얼마나 차지할지 제어할 수 있게 해주는 위젯이다.

굉장히 유연하고 사용하기 편해서 많이들 쓰는 위젯이다. 남은 공간을 차지하는 위젯이라고 했지만 정확히는 '어떻게 차지할 것인지' 채움 방식을 지정할 수 있는 위젯이다. 그냥 무식하게 차지하는 위젯을 원한다면 Expanded 를 사용하면 될 것이다. 한번 간단히 알아보자.

하위 속성

속성명	타입	기본값	설명
child	Widget	–	Flexible이 감싸는 자식 위젯
flex	int	1	여유 공간을 자식 위젯들 간에 나누는 비율
fit	FlexFit	FlexFit.loose	공간을 반드시 채울지 여부를 결정하는 속성

 

사용하는 방법은 간단하다. Flexible 로 감싸면 된다. 끝이다.

Flexible(
  child: Container()
),

이제 하위 속성에 있는 flex 로 얼마만큼 차지할지 크기를 조절해줄 수도 있다.

Row(
  children: [
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
  ],
)

 

flex 은 결국 상대적인 비율이기 때문에 사용하는 flex 값이 많아지면 많아질수록 사이즈 조절이 어려워지는 점 조심하자.

예를 들어 Flexible 을 딱 한 위젯만 사용하고 있다 가정한다면 flex 는 굳이 쓰지 않아도 된다. 기본값이 flex: 1 이기 때문에 위젯을 사용한 것만으로도 이미 그 효과가 나타나고 있을 것이다. 이제 다른 flex 를 추가한다면 예를 들어 2라면.. 그 사이즈는 전체가 100이라고 한다면 flex: 1 은 33.3 을 차지할 것이고 flex: 2는 66.6을 차지할 것이다. 이제 3이 추가 되면 1은 1/6 을 2는 1/3을 3은 1/2 를 차지하게 될 것이다. 암튼 이런 느낌으로 사이즈를 잘 조절해서 사용해주면 된다.

 

사실 예제도 그렇고 설명에서는 flex 를 사용해서 비율로 위젯 크기를 늘리는 용도로 사용하고 있다. 물론 이것도 의도된 방향성이고 잘 사용하는 거지만 나는 조금 다르게 이 위젯을 사용하곤 한다. 이 친구가 또 사이즈 오류 해결을 기갈나게 해 준다.

만들다 보니까 이렇게 오류가 생길 수 있다. 특히나 데이터를 외부에서 받아오는 경우 String 같은 거 받아올 때 얼마나 많은 글자가 올진 아무도 모른다. 이럴 때 우리는 오류를 무조건 대비하는 코드를 적어놔야 하는데 그렇지 않으면 사진같이 사이즈 오류가 나서 화면이 망가질 수 있다.

이럴 때에 Flexible 을 사용해 주는 것이다. 

Flexible(
  child: Text(
    'THIS IS FLEXIBLE EX',
    style: TextStyle(fontSize: 20,),
  ),
),

딱 차지할 수 있는 공간만 차지하게 해 준다. 그러면 이런 의문이 들 수 있다. 'Expanded 쓰면 되는 거 아님?' 맞다. 그래도 된다. 솔직히 이 위젯이랑 그거랑 별로 차이는 없기 때문에 문제는 없다 하지만 이거 사용하는 것이 여러므로 더 좋을 것이다. (함 잡서 봐)

사실 하위 속성에 있는 fit 으로 그냥 Expanded 로 만들 수도 있어서 그렇다.

Flexible(
  fit: FlexFit.tight,
)

 

이렇게 하면 완벽하게 Expanded 와 똑같이 사용할 수 있다.

이제 왜 Flexible 을 사용하라고 하는지 감이 잡히는가? Flexible 은 굉장히 유연하기 때문에 반응형으로 제작할 때 정말 필수적인 위젯일 것이다. 이번에는 정말 간단하게 알아보았는데 도움이 되었길 바라며 마치겠다.

반응형