<Flutter> 기본 위젯 공부하기

FLUTTER에서 Container, SizedBox, Flexible, Padding, Column, Row와 같은 기본 위젯은 앱의 UI를 구성할 때 필수적인 도구입니다. 이번 글에서는 각 위젯의 특징과 예시 코드를 통해 자세히 살펴보도록 하겠습니다.

Container

Container는 reflowable과 non-reflowable 위젯을 감싸고, 그림자, 경계 및 둥근 모서리와 같은 스타일을 설정하는 데 사용됩니다. Container는 자체적으로 레이아웃을 가지며, 해당 영역에 대한 사이즈를 정할 수 있습니다.

다음은 Container 위젯의 속성과 예시 코드입니다.

속성

• width : Width of the container
• height : Height of the container
• color : Color of the container
• decoration : Defines the decoration of the container
• margin : Sets the margin of the container
• alignment : Alignment of the container

예시 코드

Container(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height * 0.3,
    color: Colors.red,
    margin: EdgeInsets.all(20),
    alignment: Alignment.center,
    child: Text(
        'Hello World!',
        style: TextStyle(fontSize: 20),
    ),
),

SizedBox

SizedBox는 값을 정확하게 지정하여 프레임의 크기를 변경하는 데 사용됩니다. 마치 Padding 위젯을 사용하듯이 공간을 설정하는 데에도 사용됩니다.

다음은 SizedBox 위젯의 속성과 예시 코드입니다.

속성

• width : Width of the sized box
• height : Height of the sized box

예시 코드

SizedBox(
    height: 20,
),

Flexible

Flexible 위젯은 확장 또는 축소 가능한 위젯을 구현하기 위해 사용됩니다. 예를 들어 Row나 Column 안에 있는 Flexible 위젯들이 시스템 화면 크기가 다른 모바일 기기들에서 유연하게 기기 크기와 레이아웃의 비율을 유지하면서 UI를 구성할 수 있습니다.

다음은 Flexible 위젯의 속성과 예시 코드입니다.

속성

• flex : A flex factor used to determine how much the child should occupy.

예시 코드

Flexible(
    flex: 1,
    child: Container(
        color: Colors.red,
    ),
),                
Flexible(
    flex: 2,
    child: Container(
        color: Colors.blue,
    ),
),

Padding

Padding 위젯은 자식 위젯의 박스를 둘러싸면서, 자식 위젯에서 제공하는 모든 공간을 포함할 때마다 제공된 상호 작용과 재배치 양을 둔다. 몇 픽셀만간이나 똑같이 위젯을 듬성문을주는 기능을 제공합니다.

다음은 Padding 위젯의 속성과 예시 코드입니다.

속성

• padding : Sets the padding of the widget

예시 코드

Padding(
    padding: EdgeInsets.all(20),
    child: Text(
        'Hello World!',
        style: TextStyle(fontSize: 20),
    ),
),

Column

Column 위젯은 하나의 세로 축을 따라서 자식 위젯을 일렬로 나열하는 데 사용됩니다. 각 위젯간의 간격 및 균등한 높이 정렬을 위해 사용할 수 있습니다.

다음은 Column 위젯의 속성과 예시 코드입니다.

속성

• crossAxisAlignment : Aligns its children vertically for the height of the column
• mainAxisAlignment : Aligns its children horizontally for the width of the column

예시 코드

Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
        Text(
            'Hello',
            style: TextStyle(fontSize: 20),
        ),
        SizedBox(
            height: 20,
        ),
        Text(
            'World',
            style: TextStyle(fontSize: 20),
        ),
    ],
),

Row

Row 위젯은 하나의 가로 축을 따라서 자식 위젯을 일렬로 나열하는 데 사용됩니다. 각 위젯 간의 간격, 균등한 너비의 정렬 등을 위해 사용할 수 있습니다.

다음은 Row 위젯의 속성과 예시 코드입니다.

속성

• crossAxisAlignment : Aligns its children vertically within the row
• mainAxisAlignment : Aligns its children horizontally within the row

예시 코드

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.green,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.blue,
    ),
  ],
),

이상으로, FLUTTER에서 기본적으로 제공하는 Container, SizedBox, Flexible, Padding, Column, Row의 위젯에 대해 자세히 살펴보았습니다. 이를 사용하여 FLUTTER에서 더욱 다양하고 복잡한 UI를 구성할 수 있으며, 프레임 기반 cross 플랫폼으로서 높은 생산성과 쉬운 배포를 제공합니다.