1. Row
Row는 말그대로 행렬의 "행"을 뜻하고,
children 속성에 들어가는 자식 위젯들이 가로로 한 줄로 나열됨.
https://api.flutter.dev/flutter/widgets/Row-class.html
Row class - widgets library - Dart API
A widget that displays its children in a horizontal array. To cause a child to expand to fill the available horizontal space, wrap the child in an Expanded widget. The Row widget does not scroll (and in general it is considered an error to have more childr
api.flutter.dev
2. Column
Column은 말그대로 행렬의 "열"을 뜻하고,
children 속성에 들어가는 자식 위젯들이 세로로 한 줄로 나열됨.
https://api.flutter.dev/flutter/widgets/Column-class.html
Column class - widgets library - Dart API
A widget that displays its children in a vertical array. To cause a child to expand to fill the available vertical space, wrap the child in an Expanded widget. The Column widget does not scroll (and in general it is considered an error to have more childre
api.flutter.dev
두 위젯 모두, 자식으로 Expanded 나 Flexible 위젯을 사용해 간격을 조절할 수 있음.
Expanded 위젯은 형제 Expanded 위젯들 간에 동일한 간격을 갖게 하고,
Flexible 위젯은 flex 속성으로 형제 Flexible 위젯들 간에 간격 비율을 설정 가능하게 함.
3. GridView
그리드뷰는 격자 형태로 위젯들을 나열하고 싶을때 사용함.
GridView.count(
crossAxisCount : 3, // 한행에 들어갈 아이템 수
children : List.generate(아이템)
)위와 같은 코드를 작성하면 한 줄에 아이템 3개씩 들어가는 그리드뷰를 생성 가능함.
https://api.flutter.dev/flutter/widgets/GridView-class.html
GridView class - widgets library - Dart API
A scrollable, 2D array of widgets. The main axis direction of a grid is the direction in which it scrolls (the scrollDirection). The most commonly used grid layouts are GridView.count, which creates a layout with a fixed number of tiles in the cross axis,
api.flutter.dev
'Front-End > Flutter' 카테고리의 다른 글
| [Flutter] 09. 카메라 (0) | 2024.03.16 |
|---|---|
| [Flutter] 08. 시간 (0) | 2024.03.16 |
| [Flutter] 06. 버튼, 잉크웰 (0) | 2024.03.16 |
| [Flutter] 05. 색상 (0) | 2024.03.16 |
| [Flutter] 04. 반응형 위젯 (0) | 2024.03.16 |
댓글