Flutter[플러터] / Expanded 를 사용하여 크기 차지하기(확장하기) Expanded (Flutter Widget of the Week)

Expanded class

Row, Column 또는 Flex 의 자식을 확장하여 자식이 사용 가능한 공간을 채우는 위젯입니다.

 

Expanded 위젯을 사용하면 Row, Column, Flex 의 자식 위젯이 주축을 따라 사용 가능한 공간(예: Row 의 경우 가로, Column 의 경우 세로)을 채우도록 확장됩니다. 여러 자식 위젯이 확장되는 경우, 사용 가능한 공간은 flex 요소에 따라 각 자식 위젯에 분배됩니다.

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

https://youtu.be/_rnZaagadyo

공식 문서 코드

 

---

Expanded 는 공간을 차지하는 데에 있어서 중요한 위젯 중에 하나이다.

정확히 말하자면 "사용 가능한" 공간을 채워주는데 이는 flex로 분배된다.

사용 법은 아주 간단한데 Expanded 로 위젯을 감싸주기만 하면 된다.

Expanded(
  child: Container(),
)

 

근데 이렇게만 쓰면 안되고 Column 이나 Row 같은 걸로 감싸야만 사용할 수 있다.

 

이렇게 하지 않으면 참고로

Incorrect use of ParentDataWidget.

 

이런 오류를 보게 될 텐데 이 오류는 이제 Stack 이나 Expanded 를 잘못 사용하면 흔히 나오는 오류다.

이거 디버그 모드에서 화면 잘 나온다고 무시하면 진짜 100% 큰코다치니 꼭 해결해주자. (release에서는 저 오류 뜬 부분 전부 회색으로 처리돼서 아무것도 보이지 않게 된다)

 

자 암튼 이렇게 사용하면 자식 위젯을 사용 가능한 공간만큼 차지하게 해주는데 흔히 감싸는 것은 "크기가 꼭 필요한 위젯"인 편이다.

예를 들자면 Row 안에서 남은 공간 만큼 텍스트 필드를 넣어야 할 때.

child: Row(
  children: [
    Icon(Icons.person),
    Expanded(
      child: TextField(),
    ),
    Icon(Icons.arrow_forward),
  ],
),

이런 식으로 정말 사용 가능한, 남아 있는 공간을 전부 차지하게 해주는 위젯인 것이다.

 

사실 이렇게 볼 필요도 없다 그냥 위의 공식 문서 코드 예제처럼 딱 저 이 역할을 하는 위젯인 것이다.

단지 더 볼 것이 있다면 여따가 flex 값을 넣어서 어느 정도 차지 할지를 정해줄 수 있다는 것 정도겠다.

하위 속성

속성명	타입	기본값	설명
flex	int	1	공간을 나눌 비율값

 

이것으로 오늘은 Expanded 에 대해서 알아보았다. 내 블로그에 이미 다른 거의 똑같은 내용의 글이 하나 있긴 한데 다른 것도 재밌으니 봐주면 고맙겠다.

 

그럼 이만 마치겠다.

반응형