Flutter 화면 개발 시 Column과 Row는 대부분의 화면에 사용된다고 봐야 합니다.
이러한 Column과 Row를 사용하시면서 하나의 화면으로 개발 하시다가 화면 사이즈가 변경될 때, Overflow나 에러가 발생하는 경우가 생겨 당황하게 됩니다.
별 고민없이 고정된 넓이/높이로 화면 개발하면서 대부분이 한 번씩은 겪는다고 봅니다.
이렇게 화면 사이즈에 따라 유동성 있게 변경되는 방법 중에 하나가 Flexible입니다.
Flexible의 내용을 한 번 보시고 오시면 Expanded를 이해하기 쉽습니다.
2021.12.31 - [Flutter(플러터)/UI] - Flexible
Flexible
Flutter 화면 개발 시 Column과 Row는 대부분의 화면에 사용된다고 봐야 합니다. 이러한 Column과 Row를 사용하시면서 하나의 화면으로 개발 하시다가 화면 사이즈가 변경될 때, Overflow나 에러가 발생하
byounghonglim.tistory.com
결론부터 말하자면 Expanded == Flexible(fit:FlexFit.tight) 입니다.
잉? 왜 2개의 똑같은 기능이 있지? 라는 생각이 들지만
사실 개발하시다보면 Flexible(fit:FlexFit.loose)는 거의 사용하실 일이 없습니다.
그럼 Flexible(fit:FlexFit.tight)를 써야하는데 괜히 복잡해보이고 귀찮으니까 그리고 좀 더 가독성 있는 이름에...(혼자만의 생각)
만들지 않았나 싶습니다.
아무튼 간단하게 설명하자면
화면에 남은 공간에 따라서 유동적으로 남은 공간은 모두 사용할 수 있게 하는 위젯입니다.
Expanded를 사용하지 않고 위젯을 그냥 사용한다면 오버플로나 에러가 발생하지만, Expanded를 사용하면 화면에 따라서 반응형으로 위젯을 보여주어 오버플로나 에러가 발생하지 않습니다.
https://api.flutter.dev/flutter/widgets/Expanded-class.html
Expanded class - widgets library - Dart API
A widget that expands a child of a Row, Column, or Flex so that the child fills the available space. Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or ve
api.flutter.dev
'Flutter(플러터) > UI' 카테고리의 다른 글
| Flutter Stateless & Stateful Widget (0) | 2022.01.04 |
|---|---|
| Flutter 이미지를 SVG Icon ( 아이콘 )으로 만들고 싶을 때. (0) | 2022.01.04 |
| Flexible (0) | 2021.12.31 |
| TextFormField 클릭 시 오버플로( overflow ) 발생 (0) | 2021.12.28 |
| TextFormField 클릭 시, 키보드가 덮어버릴 때(가릴 때) (0) | 2021.12.28 |
댓글