Flutter Column & Row 완벽 가이드 – flutter layout 기초

앱을 만들다 보면 화면에 여러 위젯을 정렬해서 배치하는 일이 정말 많습니다.
Flutter에서는 이 작업을 Column과 Row라는 레이아웃 위젯으로 간단하게 처리할 수 있습니다.
이 글에서는 Column과 Row의 기본 사용법부터, 자주 사용하는 속성까지 단계별로 소개합니다.

 

##Column과 Row란? 

Column은 위젯을 세로 방향으로 쌓아 올리는 레이아웃,
Row는 가로 방향으로 나란히 배치하는 레이아웃입니다.
이 둘만 이해해도 화면 구성이 훨씬 쉬워집니다.

 

##Column이란?

Column은 자식 위젯들을 세로 방향으로 쌓아올리는 레이아웃입니다.
아래 예제처럼 여러 개의 텍스트를 위에서 아래로 순서대로 배치할 수 있습니다.

###Column 예시

return Scaffold(
    appBar: AppBar(
    	title: Text('Title'),
    ),
    body: Column(
        children: [
            Text('첫 번째'),
            Text('두 번째'),
            Text('세 번째'),
        ],
    ),
)

세로로 Text가 한블럭씩 순서대로 나열

Column 을 chilren 칸만큼 나눠씀

chilren 영역 안에 Text

 

 

##Row란?

Row는 자식 위젯들을 가로 방향으로 나란히 배치하는 레이아웃입니다.
Column과 비슷한 방식으로 사용하며, 주로 버튼이나 아이콘을 한 줄에 배치할 때 활용됩니다.

###Row 예시

body에 바로 row가 안됨으로
column안에 row를 만들겠습니다

body: Column(
    children: [
      Row(
        children: [
          Text('첫 번째'),
          Text('두 번째'),
          Text('세 번째'),
        ],
      ),
      Text('두 번째'),
      Text('세 번째'),
    ],
),

가로로 Text가 좌측부터 우측으로 순서대로 나열

Row

 을 chilren 칸만큼 나눠씀

chilren 영역 안에 Text

 

 

##MainAxisAlignment와 CrossAxisAlignment

Column과 Row에는 자식 위젯의 정렬 방식을 지정하는 속성이 있습니다.

• mainAxisAlignment: 주 축 방향(세로 또는 가로) 정렬
• crossAxisAlignment: 교차 축 방향 정렬

###Row의 MainAxisAlignment 사용예

아래 예제는 Row의 MainAxisAlignment를 spaceAround로 설정해 자식 위젯을 균등하게 배치하는 방법입니다.

body: Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Text('첫 번째'),
          Text('두 번째'),
          Text('세 번째'),
        ],
      ),
      Text('두 번째'),
      Text('세 번째'),
	],
),

 

이전 row와 비교하면 mainAxisAlignment: MainAxisAlignment.spaceAround을 추가함으로써 공간이 균등하게 배분됬음을 확인할 수 있다.

  MainAxisAlmainAxisAlignment: MainAxisAlignm

 

##자주 하는 실수와 참고사항

 

• column과 row는 반드시 children 속성을 사용해야하고 리스트 형태로 작성해야 합니다.
• Row에 위젯이 너무 많으면 화면을 넘길 수 있으니 Expanded나 Flexible을 함께 사용하는 것이 좋습니다.

 

 

이 처럼 Column과 Row를 사용하면 Flutter 앱 화면의 기본 레이아웃을 간단하게 구성할 수 있습니다.