[Flutter 입문] 첫 번째 앱 만들기: Hello Flutter!

플러터 flutter 다이어그램

Flutter를 사용하여 첫 번째 모바일 앱을 만드는 과정을 상세히 알아보겠습니다. 이 가이드는 프로젝트 생성부터 "Hello Flutter!" 메시지를 화면에 표시하는 간단한 앱 개발까지 다룹니다.

 

1. Flutter 프로젝트 생성

Flutter 프로젝트를 생성하는 두 가지 방법이 있습니다:

 

Android Studio (GUI) 사용:

1. Android Studio 실행
2. 'New Flutter Project' 선택
3. Flutter SDK 경로 지정
4. 프로젝트 정보 입력 (이름, 위치, 설명 등)
5. 'Finish' 클릭

 

CLI (Command Line Interface) 사용:

터미널에서 다음 명령어 실행:

flutter create hello_flutter
cd hello_flutter

 

 

 

2. 가상 디바이스 설정

Android 에뮬레이터:

1. Android Studio의 Device Manager 열기
2. 'Create Device' 클릭
3. 디바이스 모델 선택 (예: Pixel 4)
4. 시스템 이미지 선택 (예: API 33)
5. AVD 이름 설정 및 추가 옵션 구성
6. 'Finish' 클릭하여 생성

 

iOS 시뮬레이터 (macOS 전용):

1. Xcode 설치 필요
2. Android Studio에서 'Open iOS Simulator' 선택

 

3. "Hello Flutter!" 앱 코드 작성

lib/main.dart 파일을 열고 다음 코드로 교체:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('My First Flutter App'),
      ),
      body: Center(
        child: Text(
          'Hello Flutter!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    ),
  ));
}

 

 

이 코드는 다음을 수행합니다:

• MaterialApp 위젯으로 앱 구조 정의
• Scaffold 위젯으로 기본 앱 레이아웃 제공
• AppBar에 제목 추가
• 화면 중앙에 "Hello Flutter!" 텍스트 표시

 

4. 앱 실행

1. 에뮬레이터나 시뮬레이터 실행
2. Android Studio의 실행 버튼 클릭 또는 터미널에서 flutter run 명령어 실행

 

앱이 성공적으로 실행되면, 선택한 가상 디바이스에 "Hello Flutter!" 메시지가 표시됩니다.

 

결론

이 간단한 예제를 통해 Flutter 앱 개발의 기본 워크플로우를 경험했습니다. Flutter의 강력한 기능 중 하나는 단일 코드베이스로 iOS와 Android 모두에서 동작하는 앱을 만들 수 있다는 점입니다.

 

다음 단계로 고려할 수 있는 것들:

1. 위젯 트리 구조 이해하기
2. 상태 관리 기법 학습 (StatefulWidget 사용)
3. 사용자 입력 처리 및 이벤트 리스너 추가
4. 네트워크 요청 구현
5. 플러터의 다양한 내장 위젯 탐색

 

Flutter는 빠르게 발전하는 프레임워크이므로, 공식 문서와 커뮤니티 리소스를 통해 최신 개발 트렌드를 계속 학습하는 것이 중요합니다.

 

 

[Flutter] 모바일앱 개발의 시작 HELLO 앱 만들기

 

[Flutter 입문 가이드] 크로스 플랫폼 개발의 혁명, Flutter 완벽 이해하기