Layout Widget) Sized Box, Container & Row, Column, Stack, Wrap

Layout Widget

Layout Widget은 각가 다양한 방식으로 위젯들을 배치하고, 레이아웃을 구성하는 데 사용되는 위젯이다.

 

1. Sized Box & Container

SizedBox와 Container는 플러터(Flutter)에서 크기를 지정하는 데 사용되는 두 가지 다른 위젯이다.

 

1) Sized Box

SizedBox는 자식 위젯의 크기를 지정하는 위젯이다. 자식 위젯을 가지지 않고, 단지 너비와 높이를 지정하여 공간을 차지하는 용도로 사용된다. SizedBox는 주로 특정 크기의 간격을 만들거나, 일부 위젯들을 레이아웃에서 제어할 때 사용된다. 즉, Sized Box는 width, height, child 밖에 가지지 못한다.

return SizedBox(
      width: 200,
      height: 100,
      child: Center(
          child: Text("Hello Sized Box!"),
      ),
    );

 

2) Container

Container 위젯은 플러터에서 가장 많이 사용되는 위젯 중 하나로, UI 요소를 감싸고 스타일을 적용하는 데 사용된다. Container 위젯은 다양한 매개변수를 받아서 다양한 스타일과 레이아웃을 지정할 수 있다.

 

Container 위젯의 매개변수들은 아래와 같은 것들이 있다.

• alignment: 컨테이너 내부의 자식 위젯의 정렬을 설정한다.
• padding: 컨테이너의 내부 여백을 설정한다.
• margin: 컨테이너의 외부 여백을 설정한다. 
• color: 컨테이너의 배경색을 설정한다.
• width: 컨테이너의 너비를 설정한다.
• height: 컨테이너의 높이를 설정한다.
• decoration: 컨테이너의 장식을 설정한다. 여기에는 그라데이션, 경계선, 그림자 등이 포함될 수 있다.
• transform: 컨테이너의 변환 효과를 설정한다. 이동, 회전, 크기 조정 등이 가능하다.
• constraints: 컨테이너의 크기 제약을 설정한다. 최소 높이, 최대 너비 등을 지정할 수 있다.
• child: 컨테이너 내부에 배치될 자식 위젯을 지정한다.

return Container(
      width: 200,
      height: 100,
      color: Colors.blue,
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      alignment: Alignment.center,
      child: Text(
        'Hello, Container!',
        style: TextStyle(color: Colors.white),
      ),
    );

 

 

decoration

Container 위젯의 decoration 매개변수는 BoxDecoration 클래스를 받는다. BoxDecoration은 컨테이너의 배경을 꾸미는 다양한 스타일과 장식 요소를 설정할 수 있도록 해준다. 아래는 BoxDecoration의 주요 매개변수들이다.

• color: 컨테이너의 배경 색상을 설정한다.
• gradient: 그라데이션 효과를 설정한다. 선형 그라데이션, 방사형 그라데이션 등이 가능하다.
• border: 컨테이너의 경계선을 설정한다. 테두리의 두께와 색상을 지정할 수 있다.
• borderRadius: 컨테이너의 모서리를 둥글게 설정한다.
• boxShadow: 그림자 효과를 설정한다. 하나 이상의 그림자를 지정할 수 있다.
• image: 배경으로 사용할 이미지를 설정한다. 이미지는 DecorationImage 클래스를 통해 지정된다.

return Container(
      width: 200,
      height: 100,
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.red, width: 2),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.5),
            blurRadius: 5,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Text(
        "Hello, Container!",
        style: TextStyle(color: Colors.white),
      ),
    );

 

하지만 Sized Box와 Container는 child 즉, 1개의 자식 위젯 요소만 포함하므로, 자식으로 여러 개의 레이아웃(위젯)을 사용하지 못한다. 즉 아래와 같은 형태가 된다.

 

2. Row, Column, Stack, Wrap

자식 위젯 요소를 여러 개 포함하기 위해서는 지금부터 기술할 위젯들을 사용해야 한다.

 

1) Row

자식 위젯들을 가로축으로 정렬하여 배치한다.

 

2) Column

자식 위젯들을 세로축으로 정렬하여 배치한다.

 

 

3) Stack

Stack은 위젯들을 겹쳐서 배치할 수 있는 레이아웃 위젯이다. 가장 마지막에 추가된 위젯이 화면 상단에 나타나며, 이전에 추가된 위젯들은 그 아래로 겹쳐진다. 기본적으로 자식 위젯들은 겹쳐져서 표현되지만, Positioned 위젯을 사용하여 Stack 위젯의 왼쪽 상단을 기준으로 좌표를 설정하여 위치를 지정할 수 있다. Positioned 매개변수로 top, left, right, bottom 등을 사용하여 위치를 지정할 수 있으며, width, height를 사용하여 자식 위젯의 크기를 지정해 줄 수 있다.

return Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
        width: 200,
        height: 200,
        left: 200,
        child: Container(
          color: Colors.red,
        )),
    Positioned(
        width: 200,
        height: 200,
        top: 200,
        left: 0,
        child: Container(
          color: Colors.yellow,
        )),
    Positioned(
        width: 200,
        height: 200,
        top: 200,
        left: 200,
        child: Container(
          color: Colors.white,
        )),
    Positioned(
        width: 200,
        height: 200,
        top: 100,
        left: 100,
        child: Container(
          color: Colors.orange,
        )),
  ],
);

 

4) Wrap

Wrap은 자식 위젯들을 가로 또는 세로 방향으로 자동으로 나열하는 레이아웃 위젯이다. 만약 자식 위젯들의 공간이 한 줄에 모두 들어가지 않을 경우, 자동으로 다음 줄로 넘어가게 된다.

Wrap(
      spacing: 8.0,
      runSpacing: 4.0,
      children: [
        Container(child: Text('Apple')),
        Container(child: Text('Banana')),
        Container(child: Text('Cherry')),
        Container(child: Text('Durian')),
        Container(child: Text('Grape')),
        Container(child: Text('Kiwi')),
        Container(child: Text('Lemon')),
        Container(child: Text('Mango')),
        Container(child: Text('Orange')),
      ],
    );

기본적으로 가로로 정렬이 되고, direction: Axis.vertical 매개 변수 전달 시 세로로 정렬이 가능하다. 즉 기본값은 direction: Axis.horizontal이다.