[UXUI][프론트엔드] 플러터 위젯으로 레이아웃 만들기(1)

 

Flutter(플러터)는 크로스플랫폼 개발을 지원하는 강력한 프레임워크예요. iOS와 Android 앱을 하나의 코드베이스로 개발할 수 있어서, 많은 개발자들이 Flutter를 사용하고 있어요.

Flutter에서 화면을 구성하려면 위젯(Widget)을 사용해야 해요. 플러터는 모든 것이 위젯으로 이루어져 있기 때문에, 기본적인 위젯의 역할과 사용법을 익히는 것이 중요해요. 처음 플러터를 배우는 사람들은 화면의 기본적인 구조를 만들 수 있도록 주요 위젯을 익히는 것이 좋아요. 이번 글에서는 Flutter에서 가장 자주 사용되는 기본 위젯들을 소개하고, 어떻게 활용할 수 있는지 정리해볼게요.

 

 

MaterialApp() - 플러터 앱의 시작점

Flutter에서 앱을 만들 때 가장 먼저 사용하는 위젯이 MaterialApp()이에요. 이 위젯은 앱의 전체적인 스타일과 기본적인 동작을 설정하는 역할을 해요.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text("Flutter 기본 구조")),
      body: Center(child: Text("Hello, Flutter!")),
    ),
  ));
}

 

위 코드에서 MaterialApp()은 전체 앱을 감싸는 역할을 하고, Scaffold()를 home 속성으로 설정해서 화면의 기본 구조를 잡아줘요.

---

Scaffold() - 화면의 기본 레이아웃 구성

Flutter에서 화면의 기본 구조를 만들 때 Scaffold()를 사용해요. Scaffold()는 앱 바(App Bar), 본문(Body), 하단바(Bottom Navigation Bar) 등을 포함하는 기본적인 레이아웃을 제공해요.

Scaffold(
  appBar: AppBar(title: Text("Flutter Scaffold")),
  body: Center(child: Text("이곳이 본문입니다.")),
  bottomNavigationBar: BottomAppBar(
    child: Padding(
      padding: EdgeInsets.all(16.0),
      child: Text("하단 바"),
    ),
  ),
);

 

이렇게 Scaffold()를 사용하면 기본적인 앱 화면 구성을 빠르게 만들 수 있어요.

---

Text() - 텍스트 출력하기

화면에 텍스트를 표시할 때는 Text() 위젯을 사용해요. 기본적인 사용법은 간단하지만, 다양한 스타일을 적용할 수 있어요.

Text(
  "플러터 위젯 배우기",
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
);

 

이렇게 하면 폰트 크기, 굵기, 색상을 지정할 수 있어요.

---

Icon() - 아이콘 추가하기

Flutter에서는 Icon() 위젯을 사용해 앱에 다양한 아이콘을 추가할 수 있어요. 기본적으로 Icons 클래스를 활용하면 쉽게 사용할 수 있어요.

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 40,
);

 

이 코드는 빨간색 하트 아이콘을 크기 40으로 표시하는 코드예요. Flutter는 다양한 기본 아이콘을 제공하니 Icons.를 입력하면 사용할 수 있는 아이콘 목록을 확인할 수 있어요.

---

Image.asset() - 이미지 추가하기

 

Flutter에서는 로컬에 있는 이미지를 추가하려면 Image.asset()을 사용해야 해요. 프로젝트 내 assets 폴더에 이미지를 저장한 후, pubspec.yaml 파일에 경로를 추가해야 해요.

1. pubspec.yaml 파일에 아래 내용을 추가

flutter:
  assets:
    - assets/my_image.png

 

 

2. Image.asset() 위젯을 사용하여 이미지 표시

 

Image.asset(
  "assets/my_image.png",
  width: 100,
  height: 100,
  fit: BoxFit.cover,
);

 

이렇게 하면 assets 폴더에 저장된 이미지를 앱에 표시할 수 있어요.

---

Container() - 박스 형태의 레이아웃 구성

 

Container()는 배경색, 크기, 패딩, 마진 등 다양한 스타일을 설정할 수 있는 기본적인 박스 위젯이에요.

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Center(
    child: Text("컨테이너 박스", style: TextStyle(color: Colors.white)),
  ),
);

 

이렇게 하면 파란색 배경을 가진 Container()가 생성돼요. BoxDecoration()을 활용하면 둥근 모서리 등 다양한 스타일을 적용할 수 있어요.

---

Center() - 중앙 정렬

 

Flutter에서 위젯을 화면의 가운데로 정렬하려면 Center() 위젯을 사용하면 돼요.

Center(
  child: Text("가운데 정렬된 텍스트"),
);

 

---

SizedBox() - 공간 조정하기

 

위젯 사이의 공간을 조정할 때 SizedBox()를 사용할 수 있어요. SizedBox()는 특정한 크기의 빈 공간을 추가하는 데 유용해요.

Column(
  children: [
    Text("첫 번째 텍스트"),
    SizedBox(height: 20),
    Text("두 번째 텍스트"),
  ],
);

---

여기까지 Flutter의 기본적인 구조를 만드는 주요 위젯들을 살펴봤어요. 좀 도움이 되셨나요?

 

다음 편에서는 앱의 네비게이션과 버튼을 다룰 수 있는 위젯들을 설명해보도록 할게요. AppBar(), BottomAppBar(), Row(), Column(), 버튼 위젯들(TextButton(), ElevatedButton(), IconButton()), 그리고 ListView()를 활용하는 방법까지 이어서 정리해볼테니 다음 편에서 만나요!