Flutter Layout - 온더테크

Contents

Flutter의 레이아웃 시스템은 위젯을 사용하여 사용자 인터페이스를 구성합니다. Flutter는 기본 위젯부터 고급 위젯까지 다양한 레이아웃 위젯을 제공하며, 이를 통해 복잡한 UI를 쉽게 설계하고 구현할 수 있습니다. Flutter의 레이아웃 위젯을 이해하고 활용하는 것은 효율적인 UI 개발의 핵심입니다.

Flutter 레이아웃 기본 원칙

모든 것이 위젯이다: Flutter에서 모든 레이아웃 요소는 위젯입니다.
위젯 트리: 모든 위젯은 트리 구조로 배열되며, 부모 위젯은 자식 위젯을 포함합니다.
단일 자식 vs. 다중 자식: 일부 레이아웃 위젯은 단일 자식을 가질 수 있고, 일부는 여러 자식을 가질 수 있습니다.

주요 레이아웃 위젯

1. Container

Container 위젯은 단일 자식을 포함하고, 패딩, 여백, 테두리, 배경 색상 등을 적용할 수 있습니다.

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('Hello, Container!'),
)

2. Row와 Column

Row와 Column 위젯은 수평 및 수직으로 자식 위젯을 배치합니다.

// Row example
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Icon(Icons.star, size: 50, color: Colors.red),
    Icon(Icons.star, size: 50, color: Colors.green),
    Icon(Icons.star, size: 50, color: Colors.blue),
  ],
)

// Column example
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star, size: 50, color: Colors.red),
    Icon(Icons.star, size: 50, color: Colors.green),
    Icon(Icons.star, size: 50, color: Colors.blue),
  ],
)

3. Expanded

Expanded 위젯은 자식 위젯이 가능한 많은 공간을 차지하도록 확장됩니다. Row나 Column 내에서 자주 사용됩니다.

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
        child: Text('Item 1'),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
        child: Text('Item 2'),
      ),
    ),
  ],
)

4. Stack

Stack 위젯은 자식 위젯을 겹쳐서 배치합니다. Positioned 위젯을 사용하여 자식 위젯의 위치를 지정할 수 있습니다.

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

5. 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'),
    ),
  ],
)

6. GridView

GridView 위젯은 스크롤 가능한 그리드를 만듭니다.

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

Flutter 레이아웃 예제

다양한 레이아웃 위젯을 조합하여 복잡한 UI를 구성할 수 있습니다. 다음은 여러 레이아웃 위젯을 사용하여 구성한 예제입니다.

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 Example')),
        body: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(16.0),
              color: Colors.blue,
              child: Text(
                'Header',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
            Expanded(
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      color: Colors.red,
                      child: Center(child: Text('Left Panel')),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      color: Colors.green,
                      child: Center(child: Text('Right Panel')),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.all(16.0),
              color: Colors.yellow,
              child: Text(
                'Footer',
                style: TextStyle(color: Colors.black, fontSize: 24),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

결론

Flutter의 레이아웃 시스템은 유연하고 강력하여 다양한 UI 요구사항을 충족할 수 있습니다. Container, Row, Column, Stack, Expanded, ListView, GridView 등 여러 레이아웃 위젯을 조합하여 복잡한 레이아웃을 쉽게 설계하고 구현할 수 있습니다. Flutter 레이아웃의 기본 원칙을 이해하고 다양한 위젯을 활용하여 더욱 풍부한 사용자 경험을 제공하는 애플리케이션을 개발할 수 있습니다.

Post Views: 100