[Flutter] Flutter 레이아웃 이해하기(Layout)

 

1. Flutter에서 레이아웃이란?

Flutter는 UI를 구성하는 위젯(toolkit)이며, 대부분의 작업은 위젯을 이용하여 레이아웃을 만드는 데 집중된다. 모든 요소(텍스트, 이미지, 아이콘, 버튼 등)는 위젯이며, 보이지 않는 요소인 행(Row), 열(Column), 그리드(Grid) 등도 위젯이다.

위젯을 조합하여 더 복잡한 UI를 만들 수 있으며, 이러한 방식으로 모든 Flutter 레이아웃이 구성된다.

 

2. 레이아웃의 핵심 개념

2.1. Constraints

Flutter에서 레이아웃은 부모-자식 관계로 이루어지며, 부모 위젯은 자식 위젯에게 Constaraints를 전달한다.

• Constaraints은 최소 및 최대 너비, 최소 및 최대 높이를 포함하는 4개의 값으로 구성된다.
• 자식 위젯은 해당 Constaraints 내에서 크기를 결정하고 부모에게 반환한다.
• 부모는 자식 위젯의 위치를 설정한다.
• 이 과정은 "Constaraints은 내려가고 크기는 올라가며, 부모가 위치를 설정한다(Constraints go down. Sizes go up. Parent sets position)."로 요약된다.

2.2. Box Types

Flutter의 모든 위젯은 RenderBox를 통해 렌더링된다.
박스는 3가지 유형이 있다.

1. 가능한 한 크게 확장하는 박스 (예: Center, ListView)
2. 자식 크기에 맞춰지는 박스 (예: Transform, Opacity)
3. 특정 크기를 가지는 박스 (예: Image, Text)

Container 위젯은 설정에 따라 동작이 달라질 수 있다.

 

3. 기본 레이아웃 구성 방법

3.1. 단일 위젯 배치하기

단일 위젯을 배치하려면 Center, Padding 등을 사용한다.

Widget build(BuildContext context) {
  return Center(
    child: BorderedImage(),
  );
}

 

3.2 Container 활용하기

Container는 여러 기능(레이아웃, 페인팅, 포지셔닝, 크기 조정)을 제공하는 위젯으로, padding과 margin을 추가할 때 유용하다.

Widget build(BuildContext context) {
  return Container(
    padding: EdgeInsets.all(16.0),
    child: BorderedImage(),
  );
}

 

3.3. 여러 위젯을 수직/수평으로 배치하기

여러 위젯을 수직 또는 수평으로 배치하려면 Column과 Row 위젯을 사용한다.

Widget build(BuildContext context) {
  return Row(
    children: [
      BorderedImage(),
      BorderedImage(),
      BorderedImage(),
    ],
  );
}

Column과 Row 조합하여 배치하기

Widget build(BuildContext context) {
  return Row(
    children: [
      Column(
        children: [
          BorderedImage(),
          Text('Dash 1'),
        ],
      ),
      Column(
        children: [
          BorderedImage(),
          Text('Dash 2'),
        ],
      ),
      Column(
        children: [
          BorderedImage(),
          Text('Dash 3'),
        ],
      ),
    ],
  );
}

 

4. 정렬과 크기 조정

4.1. 위젯 정렬하기

위젯 정렬은 mainAxisAlignment와 crossAxisAlignment를 사용한다.

Widget build(BuildContext context) {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      BorderedImage(),
      BorderedImage(),
      BorderedImage(),
    ],
  );
}

 

4.2. Expanded로 크기 조정하기

위젯이 화면을 초과할 경우 Expanded를 사용하여 크기를 자동으로 조절할 수 있다.

Widget build(BuildContext context) {
  return Row(
    children: [
      Expanded(child: BorderedImage()),
      Expanded(flex: 2, child: BorderedImage()), // 2배 크기
      Expanded(child: BorderedImage()),
    ],
  );
}

 

5. 스크롤 가능한 리스트 만들기

5.1. 기본 ListView

ListView는 스크롤이 가능한 컬럼형 레이아웃이다.

Widget build(BuildContext context) {
  return ListView(
    children: [
      BorderedImage(),
      BorderedImage(),
      BorderedImage(),
    ],
  );
}

 

5.2. ListView.builder 사용하기

아이템 개수가 많거나 동적으로 생성해야 할 때는 ListView.builder를 사용한다.

final List<ToDo> items = Repository.fetchTodos();

Widget build(BuildContext context) {
  return ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, idx) {
      var item = items[idx];
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(item.description),
            Text(item.isComplete ? '✅' : '❌'),
          ],
        ),
      );
    },
  );
}

 

6. 반응형 레이아웃 만들기

6.1 LayoutBuilder 사용하기

LayoutBuilder를 사용하면 화면 크기에 따라 다른 레이아웃을 적용할 수 있다.

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      if (constraints.maxWidth <= 600) {
        return _MobileLayout();
      } else {
        return _DesktopLayout();
      }
    },
  );
}

 

---

Flutter에서 레이아웃을 구성하는 것은 제약(Constraints), 박스(Box Types), 정렬(Alignment), 크기 조정(Sizing), 스크롤(Scrolling), 반응형 디자인(Adaptive Layouts) 등을 활용하는 과정이다. 다양한 위젯을 조합하여 원하는 레이아웃을 구현할 수 있으며, Expanded, ListView.builder, LayoutBuilder 등의 기능을 활용하면 보다 유연한 UI를 만들 수 있다.