💙
Flutter & Dart 핵심 개발 치트시트

OS별 SDK 설치부터 Android/iOS 툴체인 설정, 필수 CLI, 위젯 생명주기, 레이아웃/스타일링, 상태 관리(Provider, Riverpod), 내비게이션(GoRouter), 비동기 통신, 애니메이션 및 빌드 배포까지 단계별 퀵 레퍼런스
#flutter#dart#mobile#install#setup#cross-platform#widget#state-management#riverpod#bloc#gorouter#android#ios#web최종 업데이트: 2026-10-02
Flutter & Dart 핵심 개발 치트시트 핵심 명령어 및 실전 가이드

## 1. [Step 1] 운영체제별 Flutter SDK 설치 & 환경 변수 설정
```bash
# =============================================================
# 🪟 Windows 환경 설치 (가장 흔한 권한/경로 실수 방지)
# =============================================================
# 1. 사전 필수 요구사항: Git for Windows 설치 (https://git-scm.com)
# 2. 공식 홈페이지(docs.flutter.dev)에서 flutter_windows_x.x.x-stable.zip 다운로드
# ⚠️ 주의: 'C:\Program Files\' 같은 관리자 권한 필요 폴더가 아닌 'C:\src\flutter' 또는 'C:\flutter'에 압축 해제!
# 또는 Git 명령어로 직접 원하는 위치에 클론:
git clone https://github.com/flutter/flutter.git -b stable C:\flutter

# 3. 환경 변수 (PATH)에 Flutter bin 경로 등록:
# [시작] -> '시스템 환경 변수 편집' 검색 -> [환경 변수] -> [사용자 변수] 또는 [시스템 변수]의 'Path' 편집
# -> '새로 만들기' -> 'C:\flutter\bin' 추가 후 확인
# (PowerShell 관리자 권한으로 한 줄 설정 시):
[Environment]::SetEnvironmentVariable("Path", $env:Path + ";C:\flutter\bin", [EnvironmentVariableTarget]::User)

# 4. 새 터미널(cmd 또는 powershell) 열고 확인:
flutter --version

# =============================================================
# 🍎 macOS 환경 설치 (Apple Silicon M1/M2/M3 vs Intel)
# =============================================================
# Homebrew를 통한 초간편 설치 (권장):
brew install --cask flutter

# 또는 수동 압축 해제 방식:
# 1. 아키텍처에 맞는 zip 다운로드 (Apple Silicon: arm64 / Intel: x64)
mkdir -p ~/development
unzip ~/Downloads/flutter_macos_arm64_*.zip -d ~/development/

# 2. 환경 변수(PATH) 추가 (~/.zshrc 또는 ~/.bashrc):
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc
source ~/.zshrc

# 3. 설치 확인:
flutter --version

# =============================================================
# 🐧 Linux (Ubuntu/Debian) 환경 설치
# =============================================================
# Snap을 통한 원클릭 설치:
sudo snap install flutter --classic
```

## 2. [Step 2] 개발 툴체인 설정 & 라이선스 동의 (Android / iOS / VS Code)
```bash
# -------------------------------------------------------------
# 🤖 1. Android 개발 환경 구축 (Android Studio)
# -------------------------------------------------------------
# 1) Android Studio 다운로드 및 설치 (https://developer.android.com/studio)
# 2) Setup Wizard를 통해 Android SDK, Platform-tools 자동 설치 진행
# 3) 💡 [매우 중요!]: Command-line Tools 설치 (미설치 시 doctor 에러 발생)
#    - Android Studio 실행 -> [More Actions] 또는 [Settings] -> [Languages & Frameworks]
#    - [Android SDK] -> [SDK Tools] 탭 클릭
#    - 'Android SDK Command-line Tools (latest)' 체크박스 선택 후 [Apply] 클릭하여 설치!

# 4) Android 라이선스 전체 일괄 승인 (터미널에서 실행):
flutter doctor --android-licenses
# 화면에 라이선스 동의 질문이 나올 때마다 'y'를 입력하여 모두 승인 완료

# -------------------------------------------------------------
# 🍏 2. iOS 개발 환경 구축 (macOS 필수)
# -------------------------------------------------------------
# 1) Mac App Store에서 'Xcode' 최신 버전 설치
# 2) 터미널에서 Xcode 명령어 라인 도구 연결:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

# 3) CocoaPods (iOS 외부 라이브러리 매니저) 설치:
brew install cocoapods
# 또는: sudo gem install cocoapods

# -------------------------------------------------------------
# 💻 3. 에디터(VS Code) 확장 프로그램 설치
# -------------------------------------------------------------
# VS Code [Extensions] (Ctrl+Shift+X)에서 검색 및 설치:
#  - 'Flutter' (Dart 확장이 자동으로 함께 설치됨)
#  - 'Awesome Flutter Snippets' (단축 키워드로 위젯 템플릿 생성)
#  - 'Error Lens' (코드 에러를 인라인으로 즉시 시각화)
```

## 3. [Step 3] 환경 진단 (flutter doctor) & 첫 프로젝트 실행
```bash
# 1. 전체 개발 환경 종합 진단
flutter doctor -v

# 🎯 모든 항목이 아래처럼 [✓] 녹색 체크가 나오면 완벽한 준비 완료!
# [✓] Flutter (Channel stable, 3.x.x, on Microsoft Windows ...)
# [✓] Windows Version (Installed version of Windows is version 10 or higher)
# [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
# [✓] Chrome - develop for the web
# [✓] Android Studio (version 2024.x)
# [✓] VS Code (version 1.9x)
# [✓] Connected device (2 available)

# -------------------------------------------------------------
# 🚀 2. 첫 프로젝트 생성 & 에뮬레이터에서 실행하기
# -------------------------------------------------------------
# 새 프로젝트 생성 (my_first_app)
flutter create my_first_app
cd my_first_app

# 실행 가능한 디바이스 확인 (Chrome, 연결된 폰, 에뮬레이터)
flutter devices

# A. 웹 브라우저로 초고속 1초 만에 실행해보기:
flutter run -d chrome

# B. Android 에뮬레이터 실행하기:
# Android Studio -> [Device Manager] -> [Create Device] (Pixel 8 선택)
# -> 시스템 이미지(API 34/35) 다운로드 후 생성 -> 재생(▶) 버튼 클릭
# 에뮬레이터가 켜진 상태에서:
flutter run

# C. iOS 시뮬레이터 실행하기 (macOS):
open -a Simulator
flutter run
```

## 4. [Step 4] 핫 리로드 체험 & Flutter CLI 필수 명령어
```bash
# =============================================================
# ⚡ 핫 리로드(Hot Reload) 실전 개발 루틴
# =============================================================
# 앱이 실행 중인 상태의 터미널에서 단축키:
# [r] : 핫 리로드 (Hot Reload) - 앱 상태(입력값, 화면 스택)를 보존하면서 UI 변경점 0.5초 즉각 반영
# [R] : 핫 리스타트 (Hot Restart) - 상태를 초기화하고 앱을 처음부터 재시작
# [v] : 브라우저로 Flutter DevTools 실행 (위젯 트리 검사, 메모리/CPU 프로파일러, 네트워크 모니터)
# [h] : 단축키 도움말 보기
# [q] : 앱 실행 정상 종료

# =============================================================
# 🛠️ 프로젝트 유지보수 & 패키지 관리 CLI
# =============================================================
# 의존성 패키지 다운로드 (pubspec.yaml 기준)
flutter pub get

# 새 라이브러리 추가 (pubspec.yaml 자동 수정됨)
flutter pub add dio provider flutter_riverpod go_router

# 개발 전용 도구 추가 (코드 생성기 등)
flutter pub add dev:build_runner dev:freezed

# 패키지 최신 버전 분석 및 업그레이드
flutter pub outdated
flutter pub upgrade

# 코드 정적 분석 및 포매팅
flutter analyze                     # 문법 오류, 경고, 미사용 변수 검사
dart format lib/                    # 공식 코딩 컨벤션에 맞춰 자동 정렬 (들여쓰기 2칸)

# 💡 빌드가 꼬이거나 캐시 충돌이 발생할 때 만병통치약:
flutter clean                       # build/ 및 .dart_tool/ 캐시 완전 삭제
flutter pub get                     # 패키지 다시 받기
```

## 5. 프로젝트 디렉토리 구조 & pubspec.yaml 완벽 가이드
```text
my_flutter_app/
├── android/             → 안드로이드 네이티브 설정 (Gradle, AndroidManifest.xml)
├── ios/                 → iOS 네이티브 설정 (Podfile, Info.plist, Xcode 프로젝트)
├── web/                 → 웹 빌드용 엔트리 (index.html, manifest.json)
├── assets/              → 이미지, 폰트, 로컬 JSON 등 정적 리소스 (생성 필요)
├── lib/                 → 💡 Dart/Flutter 메인 소스 코드 디렉토리
│   ├── main.dart        → 앱 진입점 엔트리포인트 (runApp)
│   ├── models/          → 데이터 모델 (DTO, Entity)
│   ├── services/        → API 통신 및 외부 서비스 계층
│   ├── providers/       → 상태 관리 로직
│   ├── screens/         → 개별 페이지 (Page / Screen)
│   └── widgets/         → 재사용 가능한 커스텀 위젯
├── test/                → 단위 및 위젯 테스트 코드
└── pubspec.yaml         → 프로젝트 메타데이터, 의존성 라이브러리, 에셋 정의 파일
```
```yaml
# pubspec.yaml 핵심 설정 예시
name: my_flutter_app
description: "A modern Flutter mobile application."
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  dio: ^5.7.0                    # 강력한 HTTP 네트워킹 클라이언트
  flutter_riverpod: ^2.6.1       # 모던 리액티브 상태 관리
  go_router: ^14.6.0             # 선언형 URL 라우팅

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^5.0.0

flutter:
  uses-material-design: true
  assets:
    - assets/images/             # 폴더 내 모든 이미지 에셋 자동 등록
    - assets/config.json
```

## 6. Dart 3 핵심 문법 가이드 (Dart 3 for Flutter)
```dart
// [1] Null Safety (완벽한 널 안전성)
String name = "Flutter";         // 널 불가
String? nickname = null;         // 널 가능 (?)
int len = nickname?.length ?? 0; // 안전 호출(?.) & 널 병합 연산자(??)
nickname ??= "Guest";            // 널일 때만 값 할당(??=)

// [2] Dart 3 Records (다중 반환 레코드) & Patterns 구조 분해
(String, int) getUserInfo() => ("Lucky", 29);
final (userName, userAge) = getUserInfo(); // 튜플 구조 분해 할당

// 명명된 필드를 가진 레코드
({String name, int score}) getResult() => (name: "Dart", score: 100);
final result = getResult();
print("${result.name}: ${result.score}");

// [3] Dart 3 Switch 표현식 (Pattern Matching)
String getRoleBadge(String role) => switch (role) {
  'ADMIN' => '👑 관리자',
  'MANAGER' || 'LEAD' => '⭐ 매니저',
  'USER' => '👤 일반 회원',
  _ => '❓ 미지정' // default
};

// [4] Cascade 연산자 (..) 및 컬렉션 if/for
final numbers = [
  1, 2, 3,
  if (true) 4,                    // 조건부 원소 추가
  for (var i = 5; i <= 6; i++) i, // 반복문 원소 추가
];

// [5] 익스텐션 (Extension Methods)
extension StringExt on String {
  bool get isValidEmail => contains('@') && contains('.');
}
// bool valid = "test@example.com".isValidEmail;
```

## 7. 위젯 기초 & 생명주기 (Widget & Lifecycle)
```dart
import 'package:flutter/material.dart';

// [1] 앱 진입점
void main() => runApp(const MyApp());

// [2] StatelessWidget: 상태가 변하지 않는 정적 UI 컴포넌트
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const CounterScreen(),
    );
  }
}

// [3] StatefulWidget: 사용자 상호작용으로 화면이 갱신되는 동적 컴포넌트
class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

  // 1. 위젯이 트리 생성 시 단 1회 호출 (초기화, 리스너 등록)
  @override
  void initState() {
    super.initState();
    print("initState: 리소스 초기화");
  }

  // 2. 부모 위젯의 InheritedWidget/Theme이 변경될 때 호출
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  // 3. UI 렌더링 (setState 호출 시마다 다시 실행)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('카운터 예제')),
      body: Center(
        child: Text(
          '클릭 횟수: $_counter',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _counter++; // 상태 변경 후 UI 재렌더링 트리거
          });
        },
        child: const Icon(Icons.add),
      ),
    );
  }

  // 4. 위젯이 트리에서 영구 제거될 때 호출 (컨트롤러, 타이머 해제)
  @override
  void dispose() {
    print("dispose: 메모리 누수 방지 리소스 해제");
    super.dispose();
  }
}
```

## 8. 핵심 레이아웃 & 정렬 위젯 (Layout & Sizing)
```dart
// [1] Container & SizedBox: 크기, 마진, 패딩, 테두리, 배경 지정
Container(
  width: 200,
  height: 100,
  margin: const EdgeInsets.all(16),
  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.08),
        blurRadius: 10,
        offset: const Offset(0, 4),
      ),
    ],
  ),
  child: const Center(child: Text("스타일드 컨테이너")),
);

// 단순 여백/공백 줄 때는 가벼운 SizedBox 권장
const SizedBox(height: 24); // 세로 공백

// [2] Column & Row: 수직/수평 배치
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween, // 주축(가로) 정렬
  crossAxisAlignment: CrossAxisAlignment.center,     // 교차축(세로) 정렬
  children: [
    const Icon(Icons.star, color: Colors.amber),
    // 남은 공간을 비율대로 채우기
    Expanded(
      child: Text("길이가 길어져도 텍스트가 줄바꿈 처리됩니다."),
    ),
    const Text("우측 끝"),
  ],
);

// [3] Stack & Positioned: Z-Index 겹침 레이아웃
Stack(
  children: [
    Image.asset('assets/images/bg.jpg', fit: BoxFit.cover),
    Positioned(
      top: 16,
      right: 16,
      child: Badge(label: const Text('NEW'), child: const Icon(Icons.notifications)),
    ),
  ],
);

// [4] Wrap: 줄바꿈이 일어나는 태그/칩 목록
Wrap(
  spacing: 8.0, // 가로 간격
  runSpacing: 4.0, // 세로(줄바꿈) 간격
  children: [
    Chip(label: Text('Flutter')),
    Chip(label: Text('Dart')),
    Chip(label: Text('CrossPlatform')),
  ],
);
```

## 9. 고성능 스크롤 & 리스트 (Scrolling & Slivers)
```dart
// [1] ListView.builder: 화면에 보이는 아이템만 가상화(Virtualization) 렌더링
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    final item = items[index];
    return ListTile(
      leading: CircleAvatar(child: Text('${index + 1}')),
      title: Text(item.title),
      subtitle: Text(item.desc),
      trailing: const Icon(Icons.arrow_forward_ios, size: 16),
      onTap: () => print('클릭: ${item.id}'),
    );
  },
);

// [2] ListView.separated: 아이템 사이에 구분선(Divider) 자동 삽입
ListView.separated(
  itemCount: 20,
  separatorBuilder: (context, index) => const Divider(height: 1),
  itemBuilder: (context, index) => ListTile(title: Text("항목 $index")),
);

// [3] GridView.builder: 반응형 격자 레이아웃
GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,        // 한 줄에 2열
    crossAxisSpacing: 12,     // 가로 간격
    mainAxisSpacing: 12,      // 세로 간격
    childAspectRatio: 0.85,   // 가로/세로 비율
  ),
  itemCount: 10,
  itemBuilder: (context, index) => Card(child: Center(child: Text("카드 $index"))),
);

// [4] Pull-to-Refresh (당겨서 새로고침)
RefreshIndicator(
  onRefresh: () async {
    await Future.delayed(const Duration(seconds: 1)); // API 재조회
  },
  child: ListView(children: [...]),
);

// [5] CustomScrollView & Sliver: 접히는 헤더(Collapsible Appbar)
CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 180.0,
      floating: false,
      pinned: true, // 상단 고정
      flexibleSpace: FlexibleSpaceBar(
        title: const Text('프로필 상세'),
        background: Image.asset('assets/images/banner.jpg', fit: BoxFit.cover),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text("피드 아이템 $index")),
        childCount: 30,
      ),
    ),
  ],
);
```

## 10. Material 3 UI 컴포넌트 & 입력 폼 (UI & Forms)
```dart
// [1] 버튼 종류 모음
FilledButton(onPressed: () {}, child: const Text("주요 작업"));
ElevatedButton(onPressed: () {}, child: const Text("기본 버튼"));
OutlinedButton(onPressed: () {}, child: const Text("외곽선 버튼"));
TextButton(onPressed: () {}, child: const Text("텍스트 링크"));
IconButton(icon: const Icon(Icons.favorite), onPressed: () {});

// [2] 모달 & 바텀시트 호출
// SnackBar 표시
ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: const Text('저장되었습니다.'),
    action: SnackBarAction(label: '실행취소', onPressed: () {}),
  ),
);

// Alert Dialog 다이얼로그
showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: const Text('삭제 확인'),
    content: const Text('정말로 이 항목을 삭제하시겠습니까?'),
    actions: [
      TextButton(onPressed: () => Navigator.pop(context), child: const Text('취소')),
      FilledButton(onPressed: () => Navigator.pop(context), child: const Text('삭제')),
    ],
  ),
);

// Modal Bottom Sheet 바텀시트
showModalBottomSheet(
  context: context,
  shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
  builder: (context) => Container(
    padding: const EdgeInsets.all(20),
    child: const Text('하단 시트 콘텐츠'),
  ),
);

// [3] 유효성 검증(Validation) 폼 예제
final _formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        controller: _emailController,
        keyboardType: TextInputType.emailAddress,
        decoration: const InputDecoration(
          labelText: '이메일 주소',
          prefixIcon: Icon(Icons.email),
          border: OutlineInputBorder(),
        ),
        validator: (value) {
          if (value == null || value.isEmpty) return '이메일을 입력해주세요.';
          if (!value.contains('@')) return '올바른 이메일 형식이 아닙니다.';
          return null; // 통과
        },
      ),
      const SizedBox(height: 16),
      FilledButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            print("폼 검증 성공: ${_emailController.text}");
          }
        },
        child: const Text('제출하기'),
      ),
    ],
  ),
);
```

## 11. 내비게이션 & GoRouter 라우팅 (Navigation)
```dart
// 💡 [1] 전통적인 Navigator 1.0 (간단한 화면 이동)
// 페이지 이동
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const DetailScreen(id: 42)),
);

// 이전 화면으로 돌아가기 & 결과 반환
Navigator.pop(context, "결과 데이터");

// 뒤로가기 불가능한 대체 이동 (로그인 ➔ 홈 이동 시 필수)
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => const HomeScreen()),
);

// -------------------------------------------------------------
// 🚀 [2] 현대적인 선언형 라우팅: GoRouter (공식 권장, 딥링크 완벽 지원)
// -------------------------------------------------------------
import 'package:go_router/go_router.dart';

final goRouter = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomeScreen(),
      routes: [
        // 중첩 라우트: /product/:id
        GoRoute(
          path: 'product/:id',
          builder: (context, state) {
            final id = state.pathParameters['id']!;
            final query = state.uri.queryParameters['ref'] ?? '';
            return ProductDetailScreen(productId: id);
          },
        ),
      ],
    ),
    GoRoute(
      path: '/login',
      builder: (context, state) => const LoginScreen(),
    ),
  ],
  // 인증 가드 리다이렉트
  redirect: (context, state) {
    final bool isLoggedIn = AuthService.isLoggedIn;
    final bool isLoggingIn = state.matchedLocation == '/login';
    if (!isLoggedIn && !isLoggingIn) return '/login';
    if (isLoggedIn && isLoggingIn) return '/';
    return null;
  },
);

// MaterialApp에 연결:
// MaterialApp.router(routerConfig: goRouter);

// 코드에서 라우트 이동:
// context.go('/product/100');         // 스택 교체
// context.push('/product/100');       // 위에 스택 쌓기
// context.pop();                      // 뒤로 가기
```

## 12. 상태 관리 핵심 패턴 (Riverpod & Provider)
```dart
// =============================================================
// [1] Flutter Riverpod (최신 실무 대세 & 타입 안전성)
// =============================================================
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1. 단순 상태 프로바이더 정의
final counterProvider = StateProvider<int>((ref) => 0);

// 2. 비즈니스 로직을 가진 Notifier 정의
class TodoNotifier extends StateNotifier<List<String>> {
  TodoNotifier() : super([]);

  void add(String text) => state = [...state, text];
  void remove(int index) => state = state.whereIndexed((i, _) => i != index).toList();
}

final todoProvider = StateNotifierProvider<TodoNotifier, List<String>>(
  (ref) => TodoNotifier(),
);

// 3. UI에서 구독 (ConsumerWidget 사용)
class RiverpodCounterView extends ConsumerWidget {
  const RiverpodCounterView({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // ref.watch: 상태 변경 시 자동 위젯 리빌드
    final count = ref.watch(counterProvider);

    return Scaffold(
      body: Center(child: Text("Riverpod Count: $count")),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // ref.read: 이벤트 콜백에서 상태 갱신
          ref.read(counterProvider.notifier).state++;
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

// =============================================================
// [2] Provider (전통적 패턴)
// =============================================================
class UserProvider extends ChangeNotifier {
  String _name = 'Guest';
  String get name => _name;

  void updateName(String newName) {
    _name = newName;
    notifyListeners(); // 구독 중인 UI에 갱신 알림
  }
}

// UI에서:
// context.watch<UserProvider>().name;               // 값 변경 시 리빌드
// context.read<UserProvider>().updateName('Lucky'); // 콜백에서 메서드 호출
```

## 13. 비동기 통신 & API 네트워킹 (Async & Dio)
```dart
import 'dart:convert';
import 'package:dio/dio.dart';

// [1] 모델 정의 (fromJson / toJson)
class Post {
  final int id;
  final String title;

  Post({required this.id, required this.title});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'] as int,
      title: json['title'] as String,
    );
  }
}

// [2] Dio를 사용한 REST API 호출 서비스
class ApiService {
  final Dio _dio = Dio(
    BaseOptions(
      baseUrl: 'https://jsonplaceholder.typicode.com',
      connectTimeout: const Duration(seconds: 5),
      receiveTimeout: const Duration(seconds: 3),
      headers: {'Content-Type': 'application/json'},
    ),
  );

  Future<List<Post>> getPosts() async {
    try {
      final res = await _dio.get('/posts');
      final list = res.data as List;
      return list.map((json) => Post.fromJson(json)).toList();
    } on DioException catch (e) {
      throw Exception('API 에러: ${e.response?.statusCode} - ${e.message}');
    }
  }
}

// [3] FutureBuilder를 이용한 로딩/에러/성공 상태 자동 UI 렌더링
class PostListScreen extends StatelessWidget {
  final ApiService api = ApiService();
  PostListScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('게시글 목록')),
      body: FutureBuilder<List<Post>>(
        future: api.getPosts(),
        builder: (context, snapshot) {
          // 1. 로딩 상태
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 2. 에러 상태
          if (snapshot.hasError) {
            return Center(child: Text('오류 발생: ${snapshot.error}'));
          }
          // 3. 성공 상태
          final posts = snapshot.data ?? [];
          return ListView.builder(
            itemCount: posts.length,
            itemBuilder: (context, i) => ListTile(
              title: Text(posts[i].title),
            ),
          );
        },
      ),
    );
  }
}
```

## 14. 제스처, 애니메이션 & 테마 (Animations & Theme)
```dart
// [1] 터치 감지: GestureDetector vs InkWell
InkWell(
  onTap: () => print("물결 리플 효과 터치"),
  borderRadius: BorderRadius.circular(8),
  child: const Padding(padding: EdgeInsets.all(12), child: Text("클릭 가능 영역")),
);

// [2] 암시적 애니메이션 (Implicit Animations - 간편하고 부드러운 전환)
AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  width: isExpanded ? 200 : 100,
  height: isExpanded ? 200 : 100,
  decoration: BoxDecoration(
    color: isExpanded ? Colors.teal : Colors.blueGrey,
    borderRadius: BorderRadius.circular(isExpanded ? 30 : 8),
  ),
);

AnimatedOpacity(
  opacity: isVisible ? 1.0 : 0.0,
  duration: const Duration(milliseconds: 250),
  child: const Text("페이드 인/아웃 텍스트"),
);

// [3] Hero 애니메이션 (화면 간 이미지 전환 마법)
// 화면 1:
Hero(
  tag: 'product-image-42',
  child: Image.asset('assets/images/item.png'),
);
// 화면 2에서도 동일 tag 부여 시 화면 전환 간 부드럽게 크기/위치 이동 애니메이션 발생!

// [4] 다크 모드 & 테마 설정
MaterialApp(
  themeMode: ThemeMode.system, // 시스템 설정(라이트/다크) 자동 추종
  theme: ThemeData(
    useMaterial3: true,
    brightness: Brightness.light,
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo, brightness: Brightness.light),
  ),
  darkTheme: ThemeData(
    useMaterial3: true,
    brightness: Brightness.dark,
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo, brightness: Brightness.dark),
  ),
);
```

## 15. 빌드, 테스트 & 배포 명령어 (Build & Deployment)
```bash
# [1] 코드 분석 및 정적 검사
flutter analyze                      # Dart 린트 및 경고 검사
dart format lib/                     # 코드 스타일 자동 포매팅 (2칸 들여쓰기)

# [2] 테스트 실행
flutter test                         # 전체 단위/위젯 테스트 실행
flutter test test/widget_test.dart   # 특정 테스트 파일 실행

# [3] Android 릴리스 빌드
flutter build apk --release          # 단일 통합 APK 생성 (build/app/outputs/flutter-apk/)
flutter build apk --split-per-abi    # CPU 아키텍처별 경량화 APK(v7a, v8a, x86_64) 분할 빌드 (용량 최적화!)
flutter build appbundle --release    # 구글 플레이스토어 배포용 AAB 파일 생성 (권장)

# [4] iOS 릴리스 빌드 (macOS & Xcode 필수)
flutter build ipa --release          # App Store 배포용 아카이브 생성
# 생성된 .ipa 파일을 Transporter 앱 또는 Xcode Organizer를 통해 App Store Connect 업로드

# [5] Web 릴리스 빌드
flutter build web --release          # 웹 호스팅용 빌드 (build/web/ 폴더 생성)
flutter build web --wasm             # WebAssembly 최신 가속 빌드 (실험적 고성능)

# [6] 빌드 시 환경 변수 전달 (--dart-define)
flutter run --dart-define=API_URL=https://api.mycompany.com --dart-define=ENV=dev
flutter build apk --release --dart-define=API_URL=https://prod.mycompany.com
# Dart 코드에서 참조:
# const apiUrl = String.fromEnvironment('API_URL', defaultValue: 'https://dev.api.com');
```
💬
Flutter & Dart 핵심 개발 치트시트

의견 및 질문

댓글 수정

댓글 삭제
