Flutter 레이아웃 가이드: 기본 레이아웃 구성하기

Flutter의 강력한 레이아웃 시스템은 유연하고 직관적인 UI 구성을 가능하게 합니다.
이 글에서는 Flutter에서 주요 레이아웃 위젯과 이를 활용한 레이아웃 구성 방법을 소개합니다.

---

1. 레이아웃 기본 개념

Flutter의 레이아웃 시스템은 위젯 트리를 기반으로 작동합니다. 즉, 모든 UI 요소는 위젯으로 구성되며, 부모 위젯이 자식 위젯의 위치와 크기를 결정합니다.

---

2. 주요 레이아웃 위젯

2.1 Container

단일 위젯을 포함하고 스타일링, 크기 조정 및 위치를 지정하는 데 사용됩니다.

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Center(
    child: Text('Hello!'),
  ),
)

2.2 Row & Column

• Row: 자식 위젯을 가로 방향으로 배치합니다.
• Column: 자식 위젯을 세로 방향으로 배치합니다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Icon(Icons.star),
    Icon(Icons.favorite),
    Icon(Icons.person),
  ],
)

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

2.3 Expanded & Flexible

• Expanded: 가용 공간을 자식 위젯에 균등하게 분배합니다.
• Flexible: 가용 공간을 비율에 따라 분배합니다.

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

Row(
  children: [
    Flexible(
      flex: 2,
      child: Container(color: Colors.blue),
    ),
    Flexible(
      flex: 1,
      child: Container(color: Colors.yellow),
    ),
  ],
)

2.4 Stack

자식 위젯을 겹쳐서 배치합니다.

Stack(
  children: [
    Container(width: 100, height: 100, color: Colors.blue),
    Positioned(
      top: 20,
      left: 20,
      child: Icon(Icons.star, color: Colors.white),
    ),
  ],
)

2.5 ListView

스크롤 가능한 목록을 만듭니다.

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

---

3. 실습: 기본 레이아웃 구성하기

3.1 레이아웃 예제

아래 코드는 Column과 Row를 조합하여 기본적인 레이아웃을 구성합니다:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Layout Guide'),
        ),
        body: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Icon(Icons.menu),
                Text('Title'),
                Icon(Icons.settings),
              ],
            ),
            Expanded(
              child: GridView.count(
                crossAxisCount: 2,
                children: List.generate(4, (index) {
                  return Container(
                    margin: EdgeInsets.all(10),
                    color: Colors.amber,
                    child: Center(
                      child: Text('Item $index'),
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

4. 레이아웃 디자인 팁

1. 간격과 여백 사용: Padding, Margin, SizedBox 등을 사용하여 위젯 간격을 적절히 조정하세요.
2. 비율 조정: Flexible과 Expanded를 사용하여 가변적인 레이아웃을 만드세요.
3. 반응형 디자인: MediaQuery를 사용하여 화면 크기에 따라 레이아웃을 조정하세요.
4. double screenWidth = MediaQuery.of(context).size.width;
5. 중첩 사용: Stack과 Positioned를 조합하여 복잡한 레이아웃을 구성하세요.

---

5. 결론

Flutter의 레이아웃 시스템은 강력하면서도 유연합니다. 기본 위젯의 사용법을 익히면 복잡한 UI도 쉽게 구성할 수 있습니다. 다음 글에서는 반응형 레이아웃 디자인과 고급 레이아웃 패턴에 대해 다뤄보겠습니다.

---

참고 자료

• Flutter 공식 문서: https://flutter.dev/docs/development/ui/layout