[flutter] 플러터(Flutter) 레이아웃(Layout) 구성 요소와 속성

이 글은 Flutter 애플리케이션의 레이아웃을 구성하는 데 사용되는 주요 구성 요소와 속성에 대해 알아봅니다.

목차


컨테이너(Container)

컨테이너는 Flutter 앱에서 공간을 차지하는 네모난 박스입니다. 컨테이너는 자식 위젯을 감싸고, 크기, 배경색, 여백 등을 지정할 수 있습니다.

예시 코드:

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  margin: EdgeInsets.all(16),
  child: Text('컨테이너'),
)

컬럼(Column)

컬럼은 세로로 위젯을 쌓아 올리는 레이아웃 위젯입니다. 자식 위젯은 순서대로 정렬되며, 자동으로 차지할 수 있는 최대 높이를 가집니다.

예시 코드:

Column(
  children: [
    Text('첫 번째 위젯'),
    Text('두 번째 위젯'),
    Text('세 번째 위젯'),
  ],
)

로우(Row)

로우는 가로로 위젯을 배열하는 레이아웃 위젯입니다. 자식 위젯은 순서대로 정렬되며, 자동으로 차지할 수 있는 최대 너비를 가집니다.

예시 코드:

Row(
  children: [
    Text('첫 번째 위젯'),
    Text('두 번째 위젯'),
    Text('세 번째 위젯'),
  ],
)

스택(Stack)

스택은 자식 위젯을 겹쳐서 배치하는 레이아웃 위젯입니다. 스택의 자식 위젯은 동일한 위치에 겹쳐질 수 있으며, 스택에 추가된 순서대로 나타납니다.

예시 코드:

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.red,
    ),
  ],
)

Expanded

Expanded는 위젯이 가용 가능한 모든 공간을 확장하여 차지하도록 하는 레이아웃 위젯입니다. 컬럼이나 로우 내에서 사용되어 해당 위젯이 남는 공간을 채울 수 있게 합니다.

예시 코드:

Column(
  children: [
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
    Expanded(
      child: Text('다른 위젯'),
    ),
  ],
)

위에서는 Flutter 애플리케이션에서 주요한 레이아웃 구성 요소와 속성을 예시 코드와 함께 살펴보았습니다. 이것들을 조합하여 다양한 레이아웃을 구성할 수 있으며, 앱의 디자인을 만들 때 유용하게 사용할 수 있습니다.

더 자세한 내용은 Flutter 공식 documentation을 참고하시기 바랍니다.