30. Flutter 레이아웃 완벽 가이드: 기본부터 고급까지 | Flutter

고딕 스타일, dall-e

 

 

Understanding Flutter Layouts: A Comprehensive Guide

 

01. 레이아웃 위젯의 기본 개념

1) 레이아웃 위젯의 개요

Flutter에서 레이아웃 위젯은 앱의 사용자 인터페이스를 구성하는 데 중요한 역할을 합니다. 레이아웃 위젯을 사용하면 다양한 UI 요소를 배치하고, 정렬하고, 크기를 조정할 수 있습니다. 이러한 위젯들은 복잡한 레이아웃을 쉽게 구성할 수 있도록 돕습니다.

2) 단일 위젯 배치 방법

단일 위젯을 배치하는 가장 기본적인 방법은 Container 위젯을 사용하는 것입니다. Container 위젯은 여백, 패딩, 배경색 등을 설정할 수 있으며, 하나의 자식 위젯을 포함할 수 있습니다.

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('Single Widget Layout Example'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Hello, Flutter!',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

출력 결과: 파란색 배경의 컨테이너 중앙에 "Hello, Flutter!"라는 흰색 텍스트가 표시됩니다.

 

02. 다중 위젯 배치

1) 수직 및 수평으로 위젯 배치하기

Flutter에서 여러 위젯을 수직 또는 수평으로 배치하려면 Column과 Row 위젯을 사용합니다. 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('Vertical Layout Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Center(
                child: Text(
                  'Box 1',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
              child: Center(
                child: Text(
                  'Box 2',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Box 3',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

출력 결과: 세 개의 컬러 박스가 세로로 중앙에 배열됩니다.

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('Horizontal Layout Example'),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Center(
                child: Text(
                  'Box 1',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
              child: Center(
                child: Text(
                  'Box 2',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Box 3',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

출력 결과: 세 개의 컬러 박스가 가로로 중앙에 배열됩니다.

2) Row와 Column 사용법

Row와 Column 위젯은 여러 자식 위젯을 각각 가로와 세로로 배치하는 데 사용됩니다. 이 위젯들은 mainAxisAlignment, crossAxisAlignment 등의 속성을 통해 자식 위젯들의 정렬 방식을 설정할 수 있습니다.

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('Row and Column Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(Icons.star, size: 50, color: Colors.red),
                Icon(Icons.star, size: 50, color: Colors.green),
                Icon(Icons.star, size: 50, color: Colors.blue),
              ],
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.favorite, size: 50, color: Colors.pink),
                Icon(Icons.favorite, size: 50, color: Colors.orange),
                Icon(Icons.favorite, size: 50, color: Colors.purple),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

출력 결과: 첫 번째 Row에는 세 개의 별 아이콘이 가로로 균등하게 배열되고, 두 번째 Row에는 세 개의 하트 아이콘이 가로로 중앙에 배열됩니다.

 

03. 위젯 정렬 및 크기 조정

1) 위젯 정렬 방법

Flutter에서는 위젯의 정렬을 다양한 방식으로 설정할 수 있습니다. 주로 사용하는 속성으로는 mainAxisAlignment와 crossAxisAlignment가 있습니다. mainAxisAlignment는 주 축(main axis)에 따라 자식 위젯을 정렬하고, crossAxisAlignment는 교차 축(cross axis)에 따라 자식 위젯을 정렬합니다. Row와 Column 위젯에서 이러한 속성을 사용하여 위젯을 정렬할 수 있습니다.

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('Alignment Example'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
              height: 100,
              color: Colors.red,
              child: Center(child: Text('Box 1')),
            ),
            Container(
              height: 100,
              color: Colors.green,
              child: Center(child: Text('Box 2')),
            ),
            Container(
              height: 100,
              color: Colors.blue,
              child: Center(child: Text('Box 3')),
            ),
          ],
        ),
      ),
    );
  }
}

출력 결과: 세 개의 컨테이너가 세로로 정렬되고, 각 컨테이너의 너비는 화면 전체를 차지합니다.

2) 위젯 크기 조정 및 확장 방법

Flutter에서 위젯의 크기를 조정하고 확장하는 데 자주 사용하는 위젯은 Expanded와 Flexible입니다. Expanded 위젯은 부모의 남은 공간을 모두 차지하도록 자식을 확장하고, Flexible 위젯은 자식의 크기를 조정하지만 공간을 차지할 때 유연성을 제공합니다.

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('Size Adjustment Example'),
        ),
        body: Column(
          children: [
            Expanded(
              child: Container(
                color: Colors.red,
                child: Center(child: Text('Expanded')),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.green,
                child: Center(child: Text('Flexible')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

출력 결과: 첫 번째 컨테이너는 화면의 남은 공간을 모두 차지하고, 두 번째 컨테이너는 화면의 남은 공간을 유연하게 차지합니다.

 

04. 주요 레이아웃 위젯 소개

1) Container 위젯

Container 위젯은 Flutter에서 가장 기본적인 레이아웃 위젯으로, 다른 위젯을 포함할 수 있는 사각형 영역을 제공합니다. 여백, 패딩, 배경색, 경계선 등을 설정할 수 있습니다.

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('Container Example'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            padding: EdgeInsets.all(16.0),
            margin: EdgeInsets.all(16.0),
            color: Colors.blue,
            child: Center(
              child: Text(
                'Hello, Flutter!',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

출력 결과: 파란색 배경의 컨테이너가 중앙에 표시되고, 그 안에 "Hello, Flutter!"라는 흰색 텍스트가 포함됩니다.

2) GridView 위젯

GridView 위젯은 스크롤 가능한 그리드 레이아웃을 만드는 데 사용됩니다. 행과 열을 사용하여 자식 위젯들을 배치할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final List items = List.generate(50, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GridView Example'),
        ),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
          ),
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Card(
              child: Center(
                child: Text('${items[index]}'),
              ),
            );
          },
        ),
      ),
    );
  }
}

출력 결과: 50개의 항목이 스크롤 가능한 그리드 레이아웃에 표시됩니다.

3) ListView 위젯

ListView 위젯은 스크롤 가능한 리스트를 만드는 데 사용됩니다. 많은 양의 데이터를 표시할 때 유용합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final List items = List.generate(100, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView Example'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('${items[index]}'),
            );
          },
        ),
      ),
    );
  }
}

출력 결과: 100개의 항목이 스크롤 가능한 리스트에 표시됩니다.

4) Stack 위젯

Stack 위젯은 자식 위젯들을 서로 겹쳐서 배치하는 데 사용됩니다. 각 자식의 위치를 설정하여 복잡한 레이아웃을 만들 수 있습니다.

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('Stack Example'),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
              Container(
                width: 150,
                height: 150,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.yellow,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

출력 결과: 세 개의 컨테이너가 중앙에서 겹쳐져 배치됩니다.

 

05. Material 디자인 컴포넌트

1) Card 위젯

Card 위젯은 Material 디자인에서 제공하는 카드 레이아웃을 구현합니다. 카드 레이아웃은 정보나 상호작용 요소들을 시각적으로 구분할 수 있는 깔끔한 방법을 제공합니다.

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('Card Example'),
        ),
        body: Center(
          child: Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ListTile(
                  leading: Icon(Icons.album),
                  title: Text('Card Title'),
                  subtitle: Text('Card Subtitle'),
                ),
                ButtonBar(
                  children: [
                    FlatButton(
                      child: Text('ACTION 1'),
                      onPressed: () {},
                    ),
                    FlatButton(
                      child: Text('ACTION 2'),
                      onPressed: () {},
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

출력 결과: 카드 레이아웃에 제목, 부제목, 아이콘 및 버튼이 포함된 카드가 표시됩니다.

2) ListTile 위젯

ListTile 위젯은 제목, 부제목, 아이콘 등을 포함할 수 있는 하나의 행을 제공합니다. ListTile은 리스트 항목을 구성하는 데 자주 사용됩니다.

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('ListTile Example'),
        ),
        body: ListView(
          children: [
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
              subtitle: Text('Map Description'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
              subtitle: Text('Album Description'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
              subtitle: Text('Phone Description'),
            ),
          ],
        ),
      ),
    );
  }
}

출력 결과: 각 항목에 아이콘, 제목, 부제목이 포함된 세 개의 리스트 항목이 표시됩니다.

 

06. 결론

1) Flutter 레이아웃 활용의 이점

Flutter의 레이아웃 시스템은 강력하고 유연하여 다양한 사용자 인터페이스를 손쉽게 구축할 수 있게 해줍니다. Flutter 레이아웃을 활용하면 다음과 같은 이점을 얻을 수 있습니다.

• 다양한 레이아웃 옵션: Flutter는 다양한 레이아웃 위젯을 제공하여 복잡한 UI를 쉽게 구성할 수 있습니다.
• 일관된 디자인: Flutter의 레이아웃 위젯을 사용하면 다양한 디바이스와 화면 크기에서도 일관된 디자인을 유지할 수 있습니다.
• 효율적인 UI 구축: Flutter의 Hot Reload 기능을 통해 UI 변경 사항을 즉시 확인하고, 빠르게 UI를 구축할 수 있습니다.
• Material 디자인과 iOS 스타일 지원: Flutter는 Material 디자인 컴포넌트와 Cupertino 위젯을 통해 Android와 iOS 모두에서 일관된 사용자 경험을 제공합니다.

2) 추가 학습 자료 및 참고 링크

Flutter의 다양한 레이아웃 위젯과 기능을 더 깊이 이해하고 활용하기 위해 다음의 자료를 참고하세요.

• Flutter 공식 문서
• Flutter 위젯 카탈로그

이와 같은 자료를 통해 Flutter의 다양한 레이아웃 위젯을 효과적으로 사용하고, 보다 복잡하고 매력적인 앱을 개발할 수 있습니다. Flutter 레이아웃을 마스터하여 앱 개발의 효율성과 성능을 높여보세요.

 

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.25 - [Study] - 28. Flutter로 사용자 인터페이스 구축하기 | Flutter

28. Flutter로 사용자 인터페이스 구축하기 | Flutter

2024.07.24 - [Study] - 27. Windows에서 Flutter로 Android 앱 개발 시작하기: 단계별 가이드 | Flutter

27. Windows에서 Flutter로 Android 앱 개발 시작하기: 단계별 가이드 | Flutter

2024.06.27 - [Study] - 01. HTML 요소와 속성 완벽 가이드 | 웹 개발 기초

01. HTML 요소와 속성 완벽 가이드 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)