Flutter의 레이아웃 구성(Layout)

Flutter는 다양한 위젯을 제공하여 유연하고 강력한 레이아웃을 구성할 수 있습니다. 레이아웃은 Flutter 애플리케이션의 사용자 인터페이스를 구성하는 중요한 요소입니다. 이번 글에서는 Flutter에서 레이아웃을 구성하는 주요 위젯들과 그 사용 방법에 대해 설명하겠습니다.

1. Container 위젯

Container 위젯은 자식 위젯의 배치, 정렬 및 스타일링을 담당하는 기본 위젯입니다. 크기, 패딩, 마진, 색상, 테두리 등을 설정할 수 있습니다.

 

Container(
  width: 200,
  height: 200,
  padding: EdgeInsets.all(20.0),
  margin: EdgeInsets.all(10.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Center(
    child: Text('Hello, Flutter!'),
  ),
)

 

 

위 코드는 파란색 배경을 가진 사각형 컨테이너를 생성하고, 그 안에 텍스트를 중앙에 배치합니다.

2. Row와 Column 위젯

Row와 Column 위젯은 자식 위젯들을 수평 및 수직으로 배치하는 데 사용됩니다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('Column 1'),
    Text('Column 2'),
    Text('Column 3'),
  ],
)

 

위 코드는 각각 세 개의 아이콘과 텍스트를 수평 및 수직으로 균등하게 배치합니다.

3. Stack 위젯

Stack 위젯은 자식 위젯들을 겹쳐서 배치할 때 사용됩니다. 자식 위젯의 위치를 지정하기 위해 Positioned 위젯과 함께 사용됩니다.

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Positioned(
      left: 50,
      top: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

 

 

위 코드는 빨간색 사각형 위에 파란색 사각형이 겹쳐서 배치된 모습을 보여줍니다.

4. Expanded와 Flexible 위젯

Expanded와 Flexible 위젯은 자식 위젯이 가용 가능한 공간을 차지하도록 조정하는 데 사용됩니다. 주로 Row나 Column 위젯 안에서 사용됩니다.

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

 

위 코드는 두 개의 컨테이너가 가로로 균등하게 공간을 나누어 차지하는 모습을 보여줍니다.

 

 

반응형

 

 

5. GridView 위젯

GridView 위젯은 그리드 레이아웃을 구성할 때 사용됩니다. 스크롤 가능한 그리드를 쉽게 만들 수 있습니다.

 

GridView.count(
  crossAxisCount: 3,
  children: <Widget>[
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue),
    Container(color: Colors.yellow),
    Container(color: Colors.orange),
    Container(color: Colors.purple),
  ],
)

 

 

위 코드는 3개의 열을 가진 그리드 레이아웃을 생성하고, 각 셀에 다양한 색상을 지정합니다.

6. ListView 위젯

ListView 위젯은 스크롤 가능한 목록을 만들 때 사용됩니다. 많은 양의 데이터를 표시할 때 유용합니다.

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo),
      title: Text('Photos'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
)

 

위 코드는 아이콘과 텍스트를 포함하는 세 개의 항목이 있는 스크롤 가능한 목록을 생성합니다.

7. Align 및 Center 위젯

Align과 Center 위젯은 자식 위젯을 부모 위젯 내에서 정렬하는 데 사용됩니다. Align 위젯은 세부적인 정렬 위치를 지정할 수 있습니다.

 

Align(
  alignment: Alignment.bottomRight,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

Center(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)

 

 

위 코드는 각각 부모 위젯의 오른쪽 하단과 중앙에 위치한 사각형 컨테이너를 생성합니다.

결론

Flutter는 다양한 위젯을 통해 유연하고 강력한 레이아웃 구성을 지원합니다. Container, Row, Column, Stack, Expanded, GridView, ListView, Align, Center 등은 Flutter 애플리케이션에서 자주 사용되는 기본 레이아웃 위젯들입니다. 이러한 위젯들을 조합하여 복잡한 사용자 인터페이스를 쉽게 구성할 수 있습니다. Flutter의 레이아웃 시스템을 잘 활용하여 효율적이고 아름다운 애플리케이션을 만들어보세요.