3. 첫 번째 Flutter 앱 만들기: Hello, Flutter

목표

Flutter의 기본 구조를 이해하고, 간단한 Flutter 앱을 만들어 실행합니다.

1.1 소개

Flutter는 모든 것이 위젯으로 구성됩니다. 이번 단계에서는 Flutter 앱의 기본 구조를 배우고, 텍스트를 화면에 출력하는 간단한 앱을 만들어 보겠습니다.

1.2 사전 준비

• Flutter 개발 환경이 설정되어 있어야 합니다.
• Android Studio 또는 Visual Studio Code가 설치되어 있어야 합니다.
• Android 에뮬레이터 또는 실제 디바이스가 준비되어 있어야 합니다.

1.3 핵심 내용

• 1단계: 새프로젝트 생성
  • 1. IDE(Android Studio 또는 VS Code)에서 Flutter 프로젝트를 만듭니다.

이번 단계에서는 Android Studio를 이용해서 만들어 보겠습니다.

File > New > New Flutter Project

• Flutter 선택 후 Flutter SDK 경로를 설정합니다.

• Project name: hello_flutter를 입력합니다.
• Project location: 자신이 원하는 위치의 디렉토리를 지정합니다.
• Android language: Android 배포 시 사용할 언어를 선택합니다.
• Platforms: 배포할 플랫폼을 선택합니다.
• 설정을 마친 후 Create 버튼을 눌러 프로젝트를 생성합니다.

이번 단계에서는 Android / web/ Windows 3 가지의 플랫폼을 테스트 해보겠습니다.

2단계: 기본 코드 구조 이해

lib/main.dart 파일을 엽니다. 프로젝트가 생성되면 기본 자동 완성된 소스코드가 있습니다. 2단계에서는 Flutter의 기본 코드 구조를 이해하는 단계 이므로 모든 소스코드를 삭제한 후 다음과 같이 작성합니다.

Flutter의 앱의 진입점은 main() 함수입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello, Flutter!'),
        ),
        body: const Center(
          child: Text('Welcome to Flutter!'),
        ),
      ),
    );
  }
}

코드 설명

• main() 함수: Flutter 앱의 시작점입니다.
• runApp() 함수: 앱의 루트 위젯을 화면에 랜더링합니다.
• MetrialApp 위젯: Flutter의 기본 Metrial Design을 제공합니다.
• Scffold 위젯: 기본 화면 구조(AppBar, Body 등)를 정의합니다.
• Text 위젯: 화면에 텍스트를 출력합니다.

3단계 앱 실행

1. 화면 상단 Select Device 드롭다운 메뉴를 이용해서 디바이스를 선택합니다.

2. 원하는 디바이스를 선택 후 Play 아이콘을 눌러 앱을 실행합니다.

결과 화면

앱이 실행되면 화면에 다음과 같은 요소가 표시됩니다.

• 상단: “Hello, Flutter!” 라는 제목이 있는 앱바.
• 중앙: “Welcome to Flutter!”라는 텍스트.

1.4 실습과제

1. 화면의 텍스트를 “Welcome to Flutter!” 대신 “Flutter 재미있다!” 변경해보세요
2. 텍스트 변경 후 Ctrl + s를 눌러 HotReload가 작동하고 텍스트가 즉시 변경되는지 확인 해보세요.
3. Windows, Web 환경에서도 앱이 실행되는지 확인해보세요.

1.5 결론

첫 번째 Flutter 앱을 만들고 실행해 보았습니다. Flutter의 기본 구조와 핵심 위젯을 이해하는 데 초점이 맞춰졌습니다. 다음 단계에서는 Flutter의 *기본 위젯(Text, Button, Row, Column 등)을 알아보겠습니다.

1.6 Q&A

Q: 에뮬레이터에서 앱이 실행되지 않습니다.

A: 다음을 확인하세요:

• flutter doctor를 실행하여 환경 설정 상태를 확인하세요.
• 에뮬레이터가 실행 중인지 확인하세요.
• USB로 연결된 실제 디바이스의 USB 디버그 모드가 활성화되어 있는지 확인하세요.

Q: 앱을 실행했는데 텍스트가 화면에 나타나지 않습니다.

A: Center 위젯을 사용하지 않았거나 Scaffold의 body 속성이 올바르게 설정되지 않았을 수 있습니다. 예제 코드를 다시 확인하세요.

이것으로 이번 단계를 마치도록 하겠습니다. 다음 단계는 Flutter의 기본 위젯 Text, Button, Row, Column 등 을 알아보겠습니다.

감사합니다.