🦋 Flutter 앱 개발 기초: Hello World부터 시작하기

Flutter 튜토리얼

초급 난이도
튜토리얼 타입
10/13 등록일

Flutter 앱 개발 기초: Hello World부터 시작하기

초급
태그
flutter dart tutorial hello world app development
## 목표
이 튜토리얼에서는 Flutter를 사용하여 간단한 "Hello, World!" 앱을 만들고 실행하는 방법을 배웁니다. 기본적인 Flutter 프로젝트 구조와 Dart 언어의 기본 문법에 익숙해질 수 있습니다.

## 준비사항
* **Flutter SDK 설치:** [https://flutter.dev/docs/get-started/install](https://flutter.dev/docs/get-started/install) 에서 Flutter SDK를 다운로드하고 설치합니다.
* **Dart Editor:** Visual Studio Code (VS Code)와 Dart 확장 프로그램을 설치하는 것을 권장합니다. (추천)
* **Android Studio 또는 Xcode:** 앱을 Android 및 iOS 플랫폼에 실행하기 위해 필요합니다. Android Studio는 Android 앱 개발에, Xcode는 iOS 앱 개발에 사용됩니다.

## 단계별 진행

### 단계 1: Flutter 프로젝트 생성
1. 터미널(또는 명령 프롬프트)을 열고 다음 명령어를 입력하여 새 Flutter 프로젝트를 만듭니다:
`flutter create hello_world`
2. `hello_world` 폴더로 이동합니다:
`cd hello_world`
3. 앱을 실행하기 위해 다음 명령어를 입력합니다 (Android): `flutter run --android-project android/app/build.gradle` 또는 iOS: `flutter run --ios-simulator`
4. 화면에 "Hello, World!" 메시지가 표시되면 성공적으로 첫 번째 Flutter 앱을 실행한 것입니다.

### 단계 2: 앱 UI 수정하기
1. `lib/main.dart` 파일을 엽니다.
2. `Text('Hello, World!')` 줄의 텍스트를 변경하여 다른 메시지를 표시합니다 (예: `Text('My First Flutter App')`).
3. UI 디자인을 변경하려면 위젯(Widget)을 추가하고 구성할 수 있습니다. 예를 들어, 레이아웃(Layout) 위젯을 사용하여 UI 요소의 위치를 제어하거나, 스타일(Style) 위젯을 사용하여 텍스트의 색상, 글꼴 등을 설정합니다.

### 단계 3: 앱 실행 및 디버깅
1. 앱이 실행 중인 상태에서 터미널에 `flutter run` 명령어를 입력하여 앱을 다시 시작합니다.
2. 앱의 동작을 디버깅하려면 VS Code의 디버거를 사용하거나, Flutter DevTools를 사용할 수 있습니다.

코드 예제
```dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     home: Scaffold(
       appBar: AppBar(
         title: Text('Hello World App'),
       ),
       body: Center(
         Text('Hello, World!'), // 수정된 텍스트
       ),
     ),
   );
  }
}
```
등록일: 2025년 10월 13일 02:31
언어 정보
언어
Flutter
카테고리
Mobile
인기도
#30
학습 팁
코드를 직접 실행해보세요
변수를 바꿔가며 실험해보세요
오류가 나도 포기하지 마세요
다른 예제도 찾아보세요