레이아웃(Layout) 개념

Flutter에서 레이아웃은 위젯을 배치하는 방법을 말합니다. Flutter에서는 다양한 레이아웃을 제공하고 있으며, 다음과 같은 주요 레이아웃 위젯들이 있습니다.

 

Container

자식 위젯을 감싸고, 크기, 패딩(padding), 여백(margin), 배경 색상 등을 지정할 수 있는 가장 기본적인 레이아웃 위젯입니다.

 

 

Row / Column

가로 또는 세로로 자식 위젯을 배열합니다. 자식 위젯들 간의 간격을 조절할 수 있으며, 자식 위젯이 화면을 벗어날 경우 스크롤을 추가로 제공할 수 있습니다.

 

 

Stack

자식 위젯들을 쌓아서 배치합니다. 각 위젯이 화면 상에서 어느 위치에 나타날지를 지정할 수 있습니다.

 

 

Expanded / Flexible

Row 또는 Column 안에서 자식 위젯들의 크기를 조정합니다. Expanded는 남은 공간을 모두 차지하는 자식 위젯을 만들고, Flexible은 남은 공간을 일부 차지하는 자식 위젯을 만듭니다.

 

GridView

격자 모양으로 자식 위젯을 배열합니다. 각 자식 위젯의 크기는 동일하며, 스크롤을 제공할 수 있습니다.

 

 

ListView

자식 위젯을 스크롤 가능한 목록으로 배열합니다. 일반적으로 스크롤이 가능한 리스트를 구성할 때 사용됩니다.

 

 

Expanded

부모 위젯이 가지는 공간을 최대한 활용하도록 자식 위젯의 크기를 조정합니다.

위와 같은 레이아웃 위젯을 조합하여 다양한 디자인을 구현할 수 있습니다.

각각의 샘플 코드들의 예를 한번 보도록 하겠습니다.

 

 

Container

Container(
  width: 100,
  height: 100,
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.all(8),
  color: Colors.blue,
  child: Text('Hello, world!'),
)

Column

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('Hello'),
    Text('World'),
    RaisedButton(
      child: Text('Button'),
      onPressed: () {},
    ),
  ],
)

Stack

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

Flexible & Row

Row(
  children: [
    Flexible(
      child: Container(
        height: 50,
        color: Colors.red,
      ),
      flex: 1,
    ),
    Flexible(
      child: Container(
        height: 50,
        color: Colors.green,
      ),
      flex: 2,
    ),
    Flexible(
      child: Container(
        height: 50,
        color: Colors.blue,
      ),
      flex: 3,
    ),
  ],
)

GridView

GridView.count(
  crossAxisCount: 2,
  children: [
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.blue,
    ),
  ],
)

ListView

ListView(
  children: [
    ListTile(
      title: Text('Item 1'),
      subtitle: Text('Description'),
      leading: Icon(Icons.access_alarm),
      trailing: Icon(Icons.arrow_forward),
      onTap: () {},
    ),
    ListTile(
      title: Text('Item 2'),
      subtitle: Text('Description'),
      leading: Icon(Icons.access_alarm),
      trailing: Icon(Icons.arrow_forward),
      onTap: () {},
    ),
    ListTile(
      title: Text('Item 3'),
      subtitle: Text('Description'),
      leading: Icon(Icons.access_alarm),
      trailing: Icon(Icons.arrow_forward),
      onTap: () {},
    ),
  ],
)

Expanded

Column(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)