flutter 레이아웃 위젯 모음

Flutter에서는 다양한 레이아웃 위젯을 제공하여 UI 요소들을 배치하고 정렬할 수 있습니다. 레이아웃 위젯은 화면의 구조를 정의하고, 자식 위젯들을 어떻게 배치할지 결정하는 데 사용됩니다. 주요 레이아웃 위젯과 그 설명을 아래에 정리했습니다.

 

주요 레이아웃 위젯

 

1. Container

• 설명: 단일 자식을 포함할 수 있는 상자 위젯. 패딩, 마진, 경계선, 색상 등을 설정할 수 있습니다.

• 예제:

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(8.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black),
  ),
  child: Text('Hello, Container!'),
);

2. Row

• 설명: 자식 위젯들을 가로로 나란히 배치합니다.

• 예제:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
  ],
);

3. Column

• 설명: 자식 위젯들을 세로로 나란히 배치합니다.

• 예제:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('First Line'),
    Text('Second Line'),
    Text('Third Line'),
  ],
);

4. Stack

• 설명: 자식 위젯들을 겹쳐서 배치합니다.

• 예제:

Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.green,
    ),
  ],
);

5. Expanded

• 설명: Flex 위젯(Row, Column) 내에서 남은 공간을 차지하도록 자식 위젯을 확장합니다.

• 예제:

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
  ],
);

 

6. SizedBox

• 설명: 특정 크기의 상자를 생성합니다.

• 예제:

SizedBox(
  width: 100,
  height: 100,
  child: Container(
    color: Colors.blue,
  ),
);

 

7. Padding

• 설명: 자식 위젯 주위에 패딩을 추가합니다.

• 예제:

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Padded Text'),
);

8. Align

• 설명: 자식 위젯을 부모 위젯 내에서 정렬합니다.

• 예제:

Align(
  alignment: Alignment.center,
  child: Text('Centered Text'),
);

9. Center

• 설명: 자식 위젯을 중앙에 배치합니다.

• 예제:

Center(
  child: Text('Centered Text'),
);

참고 자료

 

• Flutter Documentation - Layout Widgets

• Flutter Widget Catalog