Flutter 입문 가이드

1. Flutter란?

Flutter는 Google에서 개발한 오픈 소스 UI 프레임워크로, 하나의 코드베이스로 iOS와 Android뿐만 아니라 웹, 데스크톱까지 지원하는 크로스 플랫폼 개발 도구입니다. Dart 언어를 기반으로 하며, 빠른 개발 속도와 우수한 성능을 제공합니다.

---

2. Flutter의 특징

• 크로스 플랫폼 개발: 하나의 코드로 여러 플랫폼에서 실행 가능
• Hot Reload: 코드 수정 후 즉시 반영되어 빠른 개발 가능
• 우수한 성능: 네이티브 성능에 가까운 UI/UX 제공
• 풍부한 위젯: Material Design, Cupertino 스타일 제공
• 강력한 커뮤니티 지원

  ---

3. Flutter 개발 환경 설정

3.1. Flutter SDK 설치

Flutter 공식 사이트(https://flutter.dev)에서 OS에 맞는 SDK를 다운로드 후 설치합니다.

3.2. 환경 변수 설정 (Windows 기준)

1. flutter/bin 경로를 시스템 환경 변수 Path에 추가합니다.
2. 터미널에서 flutter doctor 명령어를 실행하여 환경 설정을 확인합니다.

3.3. Android Studio 및 Emulator 설정

• Android Studio 설치 후 Flutter 플러그인 및 Dart 플러그인을 추가합니다.
• Android Emulator 또는 실기기를 연결하여 실행할 수 있도록 설정합니다.

  ---

4. 첫 번째 Flutter 프로젝트 생성

터미널에서 다음 명령어를 실행하여 새로운 Flutter 프로젝트를 생성합니다.

flutter create my_first_app
cd my_first_app
flutter run

이제 기본 Flutter 앱이 실행됩니다.

---

5. Flutter의 기본 구조

Flutter 프로젝트는 다음과 같은 구조를 가집니다.

my_first_app/
 ├── lib/            # Dart 코드 (앱의 메인 로직)
 │   ├── main.dart   # 앱의 진입점
 ├── android/        # 안드로이드 네이티브 코드
 ├── ios/            # iOS 네이티브 코드
 ├── pubspec.yaml    # 패키지 및 의존성 관리 파일

---

6. Flutter의 기본 코드 이해하기

6.1. main.dart 분석

Flutter 앱의 진입점은 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 Flutter')),
        body: Center(child: Text('Welcome to Flutter!')),
      ),
    );
  }
}

• runApp(MyApp()): 앱 실행
• MaterialApp: 기본적인 앱 설정을 제공하는 위젯
• Scaffold: 기본 레이아웃 구조 제공
• AppBar: 상단 바
• Center: 중앙 정렬
• Text: 텍스트 표시

  ---

7. Flutter 기본 위젯

Flutter는 UI를 구성하는 다양한 위젯을 제공합니다.

7.1. 레이아웃 위젯

• Column : 세로 정렬
• Row : 가로 정렬
• Container : 박스 형태의 위젯
• SizedBox : 크기 지정

7.2. 입력 위젯

• TextField : 텍스트 입력
• ElevatedButton : 버튼

7.3. 상태 관리

• StatefulWidget : 상태 변화가 필요한 위젯

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter App')),
      body: Center(child: Text('$_counter')),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

---

8. 패키지 사용하기

Flutter에서는 pub.dev에서 다양한 패키지를 사용할 수 있습니다.

8.1. 패키지 추가 방법

1. pubspec.yaml 파일에 패키지를 추가합니다.

dependencies:
  http: ^0.13.4

2. 터미널에서 flutter pub get 명령어를 실행합니다.
3. 코드에서 패키지를 가져와 사용합니다.

import 'package:http/http.dart' as http;

---

9. Flutter 디버깅 및 배포

9.1. 디버깅

• flutter run : 기본 실행
• flutter analyze : 코드 분석
• flutter doctor : 환경 확인

9.2. 배포

• Android: flutter build apk
• iOS: flutter build ios

  ---

10. 마무리

이 가이드를 따라 하면 Flutter의 기본 개념을 익히고 간단한 앱을 만들 수 있습니다. 다음 단계로는 REST API 연동, Firebase 사용법, 상태 관리 방법(Riverpod, Provider 등)을 학습하면 더욱 강력한 앱을 개발할 수 있습니다.

Flutter로 멋진 앱을 만들어 보세요! 🚀