첫 번째 Flutter 앱: "Hello World" 앱 만들기

이 강의에서는 Flutter의 기본 개념을 이해하고, 첫 번째 Flutter 애플리케이션인 "Hello World" 앱을 만드는 과정을 단계별로 안내합니다.

source : medium

사전 준비

이 강의를 시작하기 전에, 다음이 준비되어 있어야 합니다:

• Flutter SDK가 설치된 상태
• Android Studio 또는 Visual Studio Code가 설치된 상태

Flutter 프로젝트 생성하기

Flutter 프로젝트를 생성하는 과정은 매우 간단합니다.

Android Studio에서 Flutter 프로젝트 생성

1. Android Studio를 실행합니다.
2. Start a new Flutter project를 클릭합니다.
3. Flutter Application을 선택하고 Next를 클릭합니다.
4. 프로젝트 이름을 입력하고 프로젝트 경로를 설정합니다.
5. Finish를 클릭하여 프로젝트를 생성합니다.

Visual Studio Code에서 Flutter 프로젝트 생성

• Visual Studio Code를 실행합니다.
• 터미널을 열고 다음 명령어를 입력하여 Flutter 프로젝트를 생성합니다:

flutter create hello_world

• 생성된 hello_world 디렉토리를 열어 프로젝트를 엽니다.

---

Flutter 프로젝트 구조 이해하기

프로젝트를 생성하면 다양한 파일과 디렉토리가 생성됩니다. 주요 파일과 디렉토리는 다음과 같습니다:

• lib/main.dart: 애플리케이션의 진입점 파일
• pubspec.yaml: 프로젝트의 설정 파일로, 종속성과 애셋을 정의합니다.

---

"Hello World" 앱 만들기

이제 기본 코드를 수정하여 "Hello World" 메시지를 화면에 출력하는 앱을 만들어보겠습니다.

main.dart 수정하기

lib/main.dart 파일을 열고, 다음과 같이 코드를 수정합니다:

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('Hello World App'),
        ),
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

코드 설명

• import 'package:flutter/material.dart';: Flutter의 기본 패키지를 가져옵니다.
• void main(): Flutter 애플리케이션의 진입점입니다.
• runApp(MyApp()): MyApp 위젯을 루트 위젯으로 설정합니다.
• MyApp 클래스는 StatelessWidget을 상속하며, build 메서드를 통해 위젯 트리를 구성합니다.
• MaterialApp: Flutter 앱의 근간을 제공하는 위젯입니다.
• Scaffold: 화면의 기본 구조를 설정하는 위젯입니다.
• AppBar: 상단의 앱 바를 설정합니다.
• Center: 중앙 정렬을 위한 위젯입니다.
• Text: 화면에 텍스트를 출력하는 위젯입니다.

---

앱 실행하기

Flutter 애플리케이션을 실행하는 방법은 다음과 같습니다:

Android Studio에서 실행

1. 상단 메뉴에서 Run > Run 'main.dart'를 선택합니다.
2. 연결된 에뮬레이터나 실제 기기를 선택하여 앱을 실행합니다.

Visual Studio Code에서 실행

1. 터미널을 열고 프로젝트 디렉토리로 이동합니다.
2. 다음 명령어를 입력하여 앱을 실행합니다:

flutter run

---

결론

축하합니다! 첫 번째 Flutter 앱을 성공적으로 만들고 실행했습니다. 이 앱은 Flutter의 기본 개념을 이해하는 데 도움이 되었으며, 앞으로 더 복잡한 애플리케이션을 개발할 수 있는 기초를 마련했습니다.

다음 강의에서는 Flutter의 레이아웃 시스템과 위젯들을 더 깊이 탐구해보겠습니다. 함께 Flutter의 세계를 탐험해봅시다!