플러터 레이아웃 Container, Column, Row

플러터 레이아웃을 만들기 위해 사용되는 중요한 위젯 중 하나인 컨테이너(Container)와 여러 위젯을 함께 사용하기 위한 Column 및 Row 위젯에 대해 알아보겠습니다.

플러터 이미지(Image), 텍스트(Text), 아이콘(Icon) – 메모장 앱 만들기 (1)

기본 위젯에 대해서 작성한 내용도 있으니 필요하신 분은 참고하시기 바랍니다

플러터 레이아웃 위젯

컨테이너(Container) 위젯

컨테이너는 플러터에서 간단한 레이아웃을 만들 수 있는 주요한 위젯 중 하나입니다. 컨테이너는 다른 위젯을 감싸거나 화면 영역을 나누는 역할을 합니다. 일반적으로 UI를 설계할 때 사용됩니다. 그러면 컨테이너의 속성들에 대해 알아보겠습니다.

color

컨테이너의 배경색을 지정합니다. Colors.blue와 같이 사용할 수 있습니다. Colors.blue[200] 처럼 배열에 매핑 되어있는 Color(hex)을 이용할 수 있습니다.

body: Container(
  color: Colors.blue[200], // 배열[200]에 Color(0xFF90CAF9)가 매핑
),

컨테이너에 child 속성이 없다면 화면에서 사용 가능한 전체 영역을 차지합니다.

child

컨테이너에 포함될 자식 위젯을 지정합니다. 예를 들어 이미지나 텍스트 등을 추가할 수 있습니다. 아래코드에서 FlutterLogo를 넣어주는 커스텀위젯을 만들어 이미지를 넣어줍니다.

body: Container(
  color: Colors.blue[200],
  child: FlutterLogo(
    size: 100,
  ),
),

컨테이너에 자식위젯(child)을 갖으면 컨테이너가 자식위젯의 크기만큼 공간을 차지하게 됩니다.

width, height

컨테이너의 가로 및 세로 크기를 지정합니다. width, height값으로 300을 넣어주어 컨테이너 안의 자식위젯 크기가 변경되었습니다.

body: Container(
  width: 300,
  height: 300,
  color: Colors.blue[200],
  child: FlutterLogo(
    size: 100,
  ),
),

width에 double.infinity값을 넣으면 컨테이너를 앱 화면의 전체크기로 지정해줍니다.

margin, padding

각각 컨테이너의 외부 여백(margin)과 내부 여백(padding)을 지정합니다. margin속성에 EdgeInsets.all(50)을 넣어 전체에 외부여백을 만들었습니다. padding 속성인 내부여백도 동일하게 넣을 수있습니다.

body: Container(
  width: double.infinity,
  height: 300,
  color: Colors.blue[200],
  margin: EdgeInsets.all(50),
  child: FlutterLogo(
    size: 100,
  ),
),

EdgeInsets.symmetric이나 EdgeInsets.fromLTRB으로도 여백을 줄수 있습니다.

EdgeInsets.symmetric(vertical: 30, horizontal: 50), // 수직 여백 30, 수평 여백 50
EdgeInsets.fromLTRB(50, 30, 50, 30), //  좌 50, 상 30, 우50, 하 30 여백

Decoration

데코레이션 속성으로 컨테이너를 꾸밀수 있습니다. BoxDecoration(border: Border.all(color: Colors.black))으로 컨테이너의 테두리를 만들었습니다. 데코레이션 사용시 컨테이너의 color속성과 충돌나는 에러가 발생할 수 있으니 주의해야됩니다.

body: Container(
  width: 300,
  height: 300,
  decoration: BoxDecoration(border: Border.all(color: Colors.black)),
  child: FlutterLogo(
    size: 100,
  ),
),

Column, Row 위젯

Column과 Row는 여러 위젯을 세로 또는 가로로 배열하기 위한 위젯입니다. 이들을 사용하면 화면을 구성할 때 유용하게 활용할 수 있습니다. 다음은 Column과 Row의 속성들에 대해서 알아보겠습니다.

children

Column, Row 위젯은 child 속성이 아닌 children속성을 가지고 있습니다. children 속성안에 [] 괄호안에 위젯들을 넣어서 정렬할 수 있습니다. FlutterLogo(size:50)을 3개 넣어주었습니다.

body: Container(
  color: Colors.blue[200],
  width: double.infinity,
  height: 400,
  child: Column(
    children: [
      FlutterLogo(
        size: 50,
      ),
      FlutterLogo(
        size: 50,
      ),
      FlutterLogo(
        size: 50,
      )
    ],
  ),
),

Column은 세로로 위젯들을 정렬해줍니다.