반응형
플러터로 앱을 만들다 보면 화면에 여러 요소를 세로로 나열할 때가 많아요. 그럴 때 사용하는 게 바로 Column 위젯이에요. 오늘은 이 Column에 대해 쉽게 알아볼까 합니다.
- Column 위젯이 뭐야?
Column은 간단하게 말하면 여러 요소들을 세로로 쭉 나열해 주는 친구입니다. 화면에 글, 그림, 버튼 등을 세로로 배치하고 싶을 때 사용해요. - 어떻게 쓰는 거지?
Column은 아주 쉽게 쓸 수 있어요. children이라는 곳에 원하는 요소들을 리스트로 넣어주면 됩니다.
Copy code
Column(
children: <Widget>[
Text('첫 번째 글귀'),
Text('두 번째 글귀'),
Text('세 번째 글귀'),
],
)
위의 코드는 세 줄의 글을 세로로 나열한 거에요.
- 뭐가 특별해?
Column은 여러 가지 기능이 있어서 원하는 대로 배치할 수 있어요. 중앙에 놓을 수도 있고, 위나 아래에 맞출 수도 있습니다. 이런 걸 설정해 주는 것들이 mainAxisAlignment이나 crossAxisAlignment 같은 옵션이에요. - 다른 예시는 어떻게 되지?
Column은 다른 위젯, 예를 들면 Row와 조합하면 화면 구성이 더 다양해져요.
Copy code
Column(
children: <Widget>[
Text('제목'),
Row(
children: <Widget>[
Icon(Icons.star),
Text('4.7점'),
],
),
Text('아래에는 다른 내용이 들어가요.'),
],
)
이렇게 Column 안에 Row를 넣어서 별 아이콘과 점수를 옆으로 나열할 수도 있어요.
- 마무리
Column 위젯은 플러터로 앱 만들 때 정말 유용하게 쓰이는 친구에요. 이 친구를 잘 활용하면 화면을 쉽게 꾸밀 수 있답니다.
그럼 오늘은 여기까지! 다음에는 또 다른 유용한 위젯들에 대해 같이 알아보아요!
반응형
'프레임워크 > 플러터' 카테고리의 다른 글
Flutter에서 BottomNavigation 위젯 활용하기 - 맛탐컴전 (0) | 2023.11.05 |
---|---|
플러터의 기본 프레임워크: 모바일 앱의 핵심 (0) | 2023.11.03 |
플러터 Center 위젯: 화면 정렬의 마스터피스 (0) | 2023.11.02 |
플러터에서 Row 위젯으로 가로로 배치하기! (0) | 2023.11.01 |
플러터의 핵심! Container 위젯 깊게 알아보기: 사용법부터 최적화까지 (1) | 2023.10.28 |