Mokyung
Flutter의 Flexible Widget & Expanded Widget 본문
Flexible widget
Flexible widget은 위젯 사이의 빈 공간을 어떻게 사용할 것인지에 대해 정의하는 widget이다.
https://api.flutter.dev/flutter/widgets/Flexible-class.html
Flexible class - widgets library - Dart API
A widget that controls how a child of a Row, Column, or Flex flexes. Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Co
api.flutter.dev
Flexible widget은 여러개의 widget을 갖는 Rows, Columns widget에서 활용하기 좋다.
Flexible widget에서 사용되는 주요 파라미터는 fit, flex 두가지이다.
flex
flex 파라미터는 숫자를 값으로 받는다.
Rows나 Columns widget 안의 Flexible widget들은 입력된 flex 값의 비율에 맞춰 남은 공간을 나눠 가진다.
기본 값은 1.
fit
fit 파라미터를 통해 FlexFit enum값을 받는다. FlexFit enum에는 두 가지 값이 존재하는데 각 enum의 사용은 아래와 같다.
- FlexFit.loose: 해당 widget이 필요로 하는 공간만큼 사용
- FlexFit.tight: 사용 가능한 공간을 모두 사용(빈 공간을 없앤다)
Rows widget 등의 안에서 여러 widget에 FlexFit.tight를 사용할 경우, 해당 widget들이 남은 공간을 모두 나눠 가진다.
만약 한 widget은 FlexFit.tight이고, 다른 widget은 FlexFit.loose라면 FlexFit.loose인 widget이 FlexFit.tight였다면 가졌을 공간을 빈공간으로 모두 나눠가진다.
Expanded widget
Expanded widget은 간단히 말해 Flexible widget에서 fit: FlexFit.tight 값을 준 widget이다.
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
따라서 fit 파라미터는 받지 않고, flex 파라미터만 받는다.
느낀점
- css의 flexbox, 안드로이드의 layout_weight 와 비슷한 방식으로 사용하면 될 것 같다.
- Flutter의 widget들은 설정을 많이 받을 수 있는 base widget을 두고, 거기에 특정 설정을 포함한 widget을 따로 두는 경우가 많은 것 같다. 잘 사용하면 코드가 깔끔해지고 좋을 수 있지만, 세부 설정이 들어간 widget의 존재를 몰라도 앱을 만들 수는 있겠다.
'컴퓨터 > Flutter' 카테고리의 다른 글
| Dart의 final vs const (0) | 2021.09.06 |
|---|---|
| Dart의 private 선언 (0) | 2021.09.05 |
| Dart의 Constructor (0) | 2021.09.04 |
