🛠️ Flutter 개발 환경 세팅하기

자, 이제 본격적으로 Flutter 개발을 시작해볼까? 먼저 개발 환경부터 세팅해야 해. 생각보다 어렵지 않으니까 차근차근 따라와봐!

📥 1단계: Flutter SDK 설치

Flutter 공식 웹사이트(flutter.dev)에 가면 운영체제별로 설치 가이드가 잘 나와 있어. Windows, macOS, Linux 모두 지원해.

Windows 사용자라면:
1. Flutter SDK를 다운로드받아
2. 원하는 위치에 압축을 풀고 (예: C:\src\flutter)
3. 환경 변수 PATH에 flutter\bin 경로를 추가해주면 돼

macOS 사용자라면:
터미널에서 간단하게 설치할 수 있어:

git clone https://github.com/flutter/flutter.git -b stable
export PATH="$PATH:`pwd`/flutter/bin"

설치가 끝났으면 터미널이나 명령 프롬프트에서 flutter doctor 명령어를 실행해봐. 이 명령어는 Flutter 개발에 필요한 모든 것들이 제대로 설치됐는지 체크해주는 친절한 의사 선생님 같은 거야. 🩺

🔧 2단계: IDE 설정

Flutter 개발에는 주로 두 가지 IDE를 사용해:

1. Android Studio
무겁긴 하지만 기능이 정말 강력해. 특히 Android 에뮬레이터가 내장되어 있어서 편리하지. Flutter와 Dart 플러그인만 설치하면 바로 사용할 수 있어.

2. Visual Studio Code
가볍고 빠르다는 게 최고 장점이야. 나는 개인적으로 VS Code를 선호하는데, 확장 프로그램 마켓플레이스에서 "Flutter"랑 "Dart"를 검색해서 설치하면 끝! 메모리도 덜 먹고 속도도 빨라서 좋아. 💨

📱 3단계: 에뮬레이터 또는 실제 기기 준비

앱을 만들었으면 테스트해봐야겠지? 두 가지 방법이 있어:

에뮬레이터 사용:
• Android: Android Studio에서 AVD Manager로 가상 기기 생성
• iOS: macOS에서만 가능, Xcode의 Simulator 사용

실제 기기 사용:
개인적으로는 실제 기기를 추천해. 성능도 더 정확하게 테스트할 수 있고, 터치 감각이나 실제 사용성을 확인하기에 좋거든. USB로 연결하고 개발자 모드만 활성화하면 돼!

🎯 첫 Flutter 앱 만들어보기

자, 이제 진짜 코딩을 해볼 시간이야! 걱정 마, 어렵지 않아. Flutter의 철학은 "모든 것이 위젯(Widget)"이야. 화면에 보이는 모든 것, 버튼도 위젯, 텍스트도 위젯, 레이아웃도 위젯! 레고 블록 조립하듯이 위젯을 조합해서 앱을 만드는 거지. 🧩

🚀 프로젝트 생성

터미널이나 명령 프롬프트를 열고 다음 명령어를 입력해봐:

flutter create my_first_app
cd my_first_app
flutter run

짜잔! 🎉 이렇게 간단한 명령어 세 줄로 앱이 실행됐어. 기본 카운터 앱이 나타날 거야. 화면 중앙에 숫자가 있고, 오른쪽 아래에 + 버튼이 있지? 버튼을 누르면 숫자가 올라가는 간단한 앱이야.

📝 코드 구조 이해하기

lib/main.dart 파일을 열어봐. 이게 앱의 진입점이야. 코드를 보면 좀 길어 보이지만, 핵심만 뽑아서 설명해줄게:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

main() 함수: 모든 Dart 프로그램의 시작점이야. runApp()을 호출해서 앱을 실행시키지.

MyApp 클래스: StatelessWidget을 상속받아. "Stateless"는 상태가 없다는 뜻이야. 즉, 한 번 그려지면 변하지 않는 위젯이라는 거지.

MaterialApp: Material Design을 따르는 앱의 루트 위젯이야. 테마, 라우팅, 타이틀 등을 설정할 수 있어.

🔄 Hot Reload 체험하기

이제 Flutter의 가장 멋진 기능을 체험해볼 시간이야! 앱이 실행된 상태에서 코드를 수정해봐. 예를 들어, 타이틀을 바꿔보자:

home: MyHomePage(title: '내 첫 Flutter 앱! 🎉'),

저장하고 (Ctrl+S 또는 Cmd+S) 터미널에서 r 키를 눌러봐. 또는 VS Code에서는 자동으로 Hot Reload가 실행돼. 앱이 재시작되지 않고 화면만 바뀌는 게 보이지? 이게 바로 Hot Reload의 마법이야! ✨

상태까지 유지되니까, 카운터를 10까지 올려놓고 코드를 수정해도 숫자는 그대로 10이야. 개발 속도가 엄청나게 빨라지는 이유가 바로 이거야!

🧩 Flutter 위젯 완전 정복

Flutter의 핵심은 위젯이야. 위젯을 잘 다루면 어떤 UI든 만들 수 있어. 자주 사용하는 위젯들을 카테고리별로 정리해봤어!

📦 레이아웃 위젯

Container(
  padding: EdgeInsets.all(16.0),
  margin: EdgeInsets.symmetric(vertical: 8.0),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12.0),
  ),
  child: Text('안녕하세요!'),
)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('첫 번째 줄'),
    Text('두 번째 줄'),
    Text('세 번째 줄'),
  ],
)

Stack(
  children: [
    Image.network('https://example.com/image.jpg'),
    Positioned(
      bottom: 16,
      right: 16,
      child: Text('이미지 설명', style: TextStyle(color: Colors.white)),
    ),
  ],
)

🎨 UI 위젯

Text(
  '멋진 텍스트!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.purple,
    letterSpacing: 1.5,
  ),
)

// 네트워크 이미지
Image.network('https://example.com/image.jpg')

// 로컬 에셋 이미지
Image.asset('assets/images/logo.png')

// 크기 조절
Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 36.0,
)

🎯 인터랙션 위젯

// ElevatedButton (입체감 있는 버튼)
ElevatedButton(
  onPressed: () {
    print('버튼 클릭!');
  },
  child: Text('클릭하세요'),
)

// TextButton (텍스트만 있는 버튼)
TextButton(
  onPressed: () {},
  child: Text('텍스트 버튼'),
)

// IconButton (아이콘 버튼)
IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

TextField(
  decoration: InputDecoration(
    labelText: '이름을 입력하세요',
    hintText: '홍길동',
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.person),
  ),
  onChanged: (value) {
    print('입력된 값: $value');
  },
)

🎨 상태 관리 마스터하기

앱이 복잡해지면 상태 관리가 정말 중요해져. "상태"라는 게 뭐냐고? 간단히 말하면 앱의 데이터야. 사용자가 로그인했는지, 장바구니에 뭐가 담겼는지, 다크모드가 켜져있는지 등등. 이런 정보들을 어떻게 관리하느냐에 따라 앱의 품질이 결정돼! 🎯

📊 setState - 가장 기본적인 방법

StatefulWidget에서 사용하는 가장 기본적인 상태 관리 방법이야. 간단한 앱에는 이것만으로도 충분해!

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('카운터: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('증가'),
        ),
      ],
    );
  }
}

setState()를 호출하면 Flutter가 "아, 상태가 바뀌었구나!" 하고 해당 위젯을 다시 그려줘. 간단하지? 😊

🎯 Provider - 중급 개발자의 선택

Provider는 Flutter 팀이 공식적으로 추천하는 상태 관리 패키지야. 배우기 쉽고 성능도 좋아서 많은 개발자들이 사용해.

먼저 pubspec.yaml에 패키지를 추가해:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

그리고 간단한 카운터 모델을 만들어보자:

import 'package:flutter/foundation.dart';

class CounterModel extends ChangeNotifier {
  int _count = 0;
  
  int get count => _count;
  
  void increment() {
    _count++;
    notifyListeners(); // 리스너들에게 변경 알림
  }
}

이제 앱에서 사용해보자:

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Provider 예제')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('카운터 값:'),
            Consumer<CounterModel>(
              builder: (context, counter, child) {
                return Text(
                  '${counter.count}',
                  style: TextStyle(fontSize: 48),
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<CounterModel>().increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

🚀 Riverpod, Bloc, GetX - 고급 옵션들

앱이 더 복잡해지면 다른 상태 관리 솔루션도 고려해볼 수 있어:

Riverpod: Provider의 개선 버전. 컴파일 타임 안정성이 더 좋아.
Bloc: 비즈니스 로직을 완전히 분리하고 싶을 때. 좀 복잡하지만 강력해.
GetX: 상태 관리뿐만 아니라 라우팅, 의존성 주입까지 해결. 올인원 솔루션!

개인적으로는 처음에는 Provider로 시작하고, 필요에 따라 다른 걸로 넘어가는 걸 추천해. 😊

🌐 네트워킹과 API 연동

요즘 앱은 거의 다 서버와 통신하잖아? 날씨 정보를 가져오거나, 사용자 데이터를 저장하거나, 소셜 로그인을 하거나. Flutter에서 네트워킹하는 방법을 알아보자! 🌍

📡 http 패키지 사용하기

가장 기본적인 HTTP 요청은 http 패키지로 할 수 있어. 먼저 패키지를 추가하자:

dependencies:
  http: ^1.1.0

간단한 GET 요청 예제를 볼까?

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

Future<Map<String, dynamic>> fetchUserData() async {
  final response = await http.get(
    Uri.parse('https://api.example.com/user/123'),
  );
  
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('데이터를 불러오는데 실패했습니다');
  }
}

POST 요청도 비슷해:

Future<void> createUser(String name, String email) async {
  final response = await http.post(
    Uri.parse('https://api.example.com/users'),
    headers: {'Content-Type': 'application/json'},
    body: json.encode({
      'name': name,
      'email': email,
    }),
  );
  
  if (response.statusCode == 201) {
    print('사용자 생성 성공!');
  } else {
    print('오류 발생: ${response.statusCode}');
  }
}

🎯 FutureBuilder로 비동기 데이터 표시하기

API에서 데이터를 가져오는 동안 로딩 화면을 보여주고, 데이터가 도착하면 표시하고, 에러가 나면 에러 메시지를 보여주는 게 일반적이지? Flutter의 FutureBuilder가 이걸 정말 쉽게 만들어줘!

class UserProfile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Map<String, dynamic>>(
      future: fetchUserData(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // 로딩 중
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          // 에러 발생
          return Center(child: Text('오류: ${snapshot.error}'));
        } else if (snapshot.hasData) {
          // 데이터 도착
          final user = snapshot.data!;
          return Column(
            children: [
              Text('이름: ${user['name']}'),
              Text('이메일: ${user['email']}'),
            ],
          );
        } else {
          return Center(child: Text('데이터가 없습니다'));
        }
      },
    );
  }
}

import 'package:dio/dio.dart';

final dio = Dio();

Future<void> uploadFile(String filePath) async {
  FormData formData = FormData.fromMap({
    'file': await MultipartFile.fromFile(filePath),
    'description': '프로필 사진',
  });
  
  try {
    Response response = await dio.post(
      'https://api.example.com/upload',
      data: formData,
      onSendProgress: (sent, total) {
        print('업로드 진행률: ${(sent / total * 100).toStringAsFixed(0)}%');
      },
    );
    print('업로드 성공: ${response.data}');
  } catch (e) {
    print('업로드 실패: $e');
  }
}

💾 로컬 데이터 저장하기

앱에서 데이터를 저장해야 할 때가 많아. 사용자 설정, 로그인 토큰, 캐시 데이터 등등. Flutter에서 로컬 저장하는 방법들을 알아보자! 📦

🔑 SharedPreferences - 간단한 키-값 저장

간단한 데이터(설정값, 토큰 등)를 저장할 때는 SharedPreferences가 최고야. 사용법도 정말 쉬워!

import 'package:shared_preferences/shared_preferences.dart';

// 데이터 저장
Future<void> saveUserSettings(bool isDarkMode, String language) async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setBool('darkMode', isDarkMode);
  await prefs.setString('language', language);
}

// 데이터 불러오기
Future<Map<String, dynamic>> loadUserSettings() async {
  final prefs = await SharedPreferences.getInstance();
  return {
    'darkMode': prefs.getBool('darkMode') ?? false,
    'language': prefs.getString('language') ?? 'ko',
  };
}

// 데이터 삭제
Future<void> clearSettings() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.clear();
}

🗄️ SQLite - 복잡한 데이터 관리

좀 더 복잡한 데이터 구조가 필요하다면? 예를 들어 할 일 목록 앱을 만든다면? SQLite 데이터베이스를 사용하면 돼! sqflite 패키지가 도와줄 거야.

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class DatabaseHelper {
  static Database? _database;
  
  Future<Database> get database async {
    if (_database != null) return _database!;
    _database = await initDatabase();
    return _database!;
  }
  
  Future<Database> initDatabase() async {
    String path = join(await getDatabasesPath(), 'todo.db');
    return await openDatabase(
      path,
      version: 1,
      onCreate: (db, version) {
        return db.execute(
          'CREATE TABLE todos(id INTEGER PRIMARY KEY, title TEXT, done INTEGER)',
        );
      },
    );
  }
  
  Future<void> insertTodo(Map<String, dynamic> todo) async {
    final db = await database;
    await db.insert('todos', todo);
  }
  
  Future<List<Map<String, dynamic>>> getTodos() async {
    final db = await database;
    return await db.query('todos');
  }
  
  Future<void> updateTodo(int id, Map<String, dynamic> todo) async {
    final db = await database;
    await db.update('todos', todo, where: 'id = ?', whereArgs: [id]);
  }
  
  Future<void> deleteTodo(int id) async {
    final db = await database;
    await db.delete('todos', where: 'id = ?', whereArgs: [id]);
  }
}

📦 Hive - 빠르고 가벼운 NoSQL

SQLite는 좋지만 좀 무겁고 복잡할 수 있어. 더 간단하고 빠른 걸 원한다면 Hive를 써봐! NoSQL 데이터베이스인데, 정말 빠르고 사용하기 쉬워.

import 'package:hive/hive.dart';

// 데이터 모델 정의
@HiveType(typeId: 0)
class Todo extends HiveObject {
  @HiveField(0)
  late String title;
  
  @HiveField(1)
  late bool done;
}

// 초기화
await Hive.initFlutter();
Hive.registerAdapter(TodoAdapter());
var box = await Hive.openBox<Todo>('todos');

// 데이터 추가
var todo = Todo()
  ..title = '장보기'
  ..done = false;
box.add(todo);

// 데이터 읽기
var todos = box.values.toList();

// 데이터 수정
todo.done = true;
todo.save();

// 데이터 삭제
todo.delete();

🎨 네비게이션과 라우팅

앱에서 화면 전환은 정말 중요하지! 로그인 화면에서 홈 화면으로, 목록에서 상세 화면으로. Flutter의 네비게이션 시스템을 마스터해보자! 🗺️

🚀 기본 네비게이션

Flutter의 네비게이션은 스택(Stack) 구조야. 화면을 쌓았다가(push) 빼는(pop) 방식이지.

// 새 화면으로 이동
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailScreen()),
);

// 이전 화면으로 돌아가기
Navigator.pop(context);

// 데이터와 함께 이동
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailScreen(id: 123),
  ),
);

// 결과값 받아오기
final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SelectionScreen()),
);
print('선택된 값: $result');

🎯 Named Routes - 더 깔끔한 방법

앱이 커지면 Named Routes를 사용하는 게 좋아. 라우트에 이름을 붙여서 관리하는 거지.

// main.dart에서 라우트 정의
MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/detail': (context) => DetailScreen(),
    '/settings': (context) => SettingsScreen(),
  },
);

// 화면 이동
Navigator.pushNamed(context, '/detail');

// 데이터 전달
Navigator.pushNamed(
  context,
  '/detail',
  arguments: {'id': 123, 'title': '상세 정보'},
);

// 데이터 받기
class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map;
    return Scaffold(
      appBar: AppBar(title: Text(args['title'])),
      body: Text('ID: ${args['id']}'),
    );
  }
}

🔥 고급 네비게이션 - go_router

더 복잡한 네비게이션이 필요하다면 go_router 패키지를 추천해! 딥링크, 리다이렉션, 중첩 라우팅 등을 쉽게 구현할 수 있어.

import 'package:go_router/go_router.dart';

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomeScreen(),
    ),
    GoRoute(
      path: '/user/:id',
      builder: (context, state) {
        final id = state.params['id']!;
        return UserScreen(userId: id);
      },
    ),
    GoRoute(
      path: '/settings',
      builder: (context, state) => SettingsScreen(),
      routes: [
        GoRoute(
          path: 'profile',
          builder: (context, state) => ProfileScreen(),
        ),
      ],
    ),
  ],
);

// 사용
MaterialApp.router(
  routerConfig: router,
);

// 화면 이동
context.go('/user/123');
context.push('/settings/profile');

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => DetailScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(1.0, 0.0);
      const end = Offset.zero;
      const curve = Curves.easeInOut;
      
      var tween = Tween(begin: begin, end: end).chain(
        CurveTween(curve: curve),
      );
      
      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  ),
);

📱 플랫폼별 최적화와 네이티브 기능

Flutter는 크로스플랫폼이지만, 각 플랫폼의 특성을 살릴 수도 있어야 해. iOS와 Android는 디자인 가이드라인도 다르고, 사용자들이 기대하는 UX도 달라. 이걸 어떻게 처리하는지 알아보자! 🎯

🎨 플랫폼별 UI 분기

때로는 플랫폼에 따라 다른 UI를 보여줘야 할 때가 있어. Flutter는 이걸 정말 쉽게 만들어줘!

import 'dart:io';

Widget build(BuildContext context) {
  return Platform.isIOS
      ? CupertinoButton(
          child: Text('iOS 스타일 버튼'),
          onPressed: () {},
        )
      : ElevatedButton(
          child: Text('Android 스타일 버튼'),
          onPressed: () {},
        );
}

또는 Theme.of(context).platform을 사용할 수도 있어:

Widget build(BuildContext context) {
  final platform = Theme.of(context).platform;
  
  return platform == TargetPlatform.iOS
      ? CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(
            middle: Text('iOS 스타일'),
          ),
          child: Center(child: Text('iOS UI')),
        )
      : Scaffold(
          appBar: AppBar(title: Text('Android 스타일')),
          body: Center(child: Text('Android UI')),
        );
}

🔌 네이티브 기능 사용하기

카메라, 위치, 알림 같은 네이티브 기능들은 어떻게 사용할까? Flutter에는 이미 만들어진 플러그인들이 엄청 많아! pub.dev에서 검색하면 거의 다 있어. 😊

import 'package:image_picker/image_picker.dart';

final ImagePicker _picker = ImagePicker();

Future<void> takePhoto() async {
  final XFile? photo = await _picker.pickImage(
    source: ImageSource.camera,
  );
  
  if (photo != null) {
    print('사진 경로: ${photo.path}');
    // 이미지 처리 로직
  }
}

Future<void> pickFromGallery() async {
  final XFile? image = await _picker.pickImage(
    source: ImageSource.gallery,
  );
  
  if (image != null) {
    print('선택한 이미지: ${image.path}');
  }
}

import 'package:geolocator/geolocator.dart';

Future<Position> getCurrentLocation() async {
  // 위치 권한 확인
  LocationPermission permission = await Geolocator.checkPermission();
  
  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
  }
  
  // 현재 위치 가져오기
  Position position = await Geolocator.getCurrentPosition(
    desiredAccuracy: LocationAccuracy.high,
  );
  
  print('위도: ${position.latitude}, 경도: ${position.longitude}');
  return position;
}

import 'package:firebase_messaging/firebase_messaging.dart';

Future<void> setupPushNotifications() async {
  FirebaseMessaging messaging = FirebaseMessaging.instance;
  
  // 권한 요청 (iOS)
  NotificationSettings settings = await messaging.requestPermission(
    alert: true,
    badge: true,
    sound: true,
  );
  
  // FCM 토큰 가져오기
  String? token = await messaging.getToken();
  print('FCM 토큰: $token');
  
  // 포그라운드 메시지 처리
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('메시지 도착: ${message.notification?.title}');
  });
}

// ❌ 나쁜 예 - 매번 새로 생성됨
Widget build(BuildContext context) {
  return Container(
    child: Text('고정된 텍스트'),
  );
}

// ✅ 좋은 예 - 한 번만 생성됨
Widget build(BuildContext context) {
  return const Container(
    child: Text('고정된 텍스트'),
  );
}

// ❌ 나쁜 예 - 모든 항목을 한 번에 생성
ListView(
  children: List.generate(1000, (index) => ListTile(title: Text('Item $index'))),
)

// ✅ 좋은 예 - 필요한 항목만 생성
ListView.builder(
  itemCount: 1000,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
)

import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
  fit: BoxFit.cover,
  memCacheWidth: 500, // 메모리 캐시 크기 제한
)

// ✅ 좋은 예 - RepaintBoundary 사용
RepaintBoundary(
  child: AnimatedContainer(
    duration: Duration(milliseconds: 300),
    // 애니메이션 속성들
  ),
)

// ✅ Transform 사용 (더 효율적)
Transform.translate(
  offset: Offset(10, 0),
  child: MyWidget(),
)

// ❌ 나쁜 예 - setState로 위치 변경 (비효율적)
Container(
  margin: EdgeInsets.only(left: position),
  child: MyWidget(),
)

lib/
  ├── main.dart
  ├── models/
  │   └── todo.dart
  ├── screens/
  │   ├── home_screen.dart
  │   └── add_todo_screen.dart
  └── widgets/
      └── todo_item.dart

class Todo {
  final String id;
  final String title;
  final String description;
  bool isDone;
  final DateTime createdAt;

  Todo({
    required this.id,
    required this.title,
    this.description = '',
    this.isDone = false,
    required this.createdAt,
  });

  void toggleDone() {
    isDone = !isDone;
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'title': title,
      'description': description,
      'isDone': isDone,
      'createdAt': createdAt.toIso8601String(),
    };
  }

  factory Todo.fromJson(Map<String, dynamic> json) {
    return Todo(
      id: json['id'],
      title: json['title'],
      description: json['description'] ?? '',
      isDone: json['isDone'] ?? false,
      createdAt: DateTime.parse(json['createdAt']),
    );
  }
}

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<Todo> todos = [];

  void _addTodo(String title, String description) {
    setState(() {
      todos.add(Todo(
        id: DateTime.now().toString(),
        title: title,
        description: description,
        createdAt: DateTime.now(),
      ));
    });
  }

  void _toggleTodo(int index) {
    setState(() {
      todos[index].toggleDone();
    });
  }

  void _deleteTodo(int index) {
    setState(() {
      todos.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('내 할 일 목록'),
        backgroundColor: Colors.deepPurple,
      ),
      body: todos.isEmpty
          ? Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.inbox, size: 100, color: Colors.grey),
                  SizedBox(height: 16),
                  Text(
                    '할 일이 없습니다!',
                    style: TextStyle(fontSize: 20, color: Colors.grey),
                  ),
                ],
              ),
            )
          : ListView.builder(
              itemCount: todos.length,
              itemBuilder: (context, index) {
                final todo = todos[index];
                return Dismissible(
                  key: Key(todo.id),
                  background: Container(
                    color: Colors.red,
                    alignment: Alignment.centerRight,
                    padding: EdgeInsets.only(right: 20),
                    child: Icon(Icons.delete, color: Colors.white),
                  ),
                  direction: DismissDirection.endToStart,
                  onDismissed: (direction) {
                    _deleteTodo(index);
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('${todo.title} 삭제됨')),
                    );
                  },
                  child: Card(
                    margin: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                    child: ListTile(
                      leading: Checkbox(
                        value: todo.isDone,
                        onChanged: (value) => _toggleTodo(index),
                      ),
                      title: Text(
                        todo.title,
                        style: TextStyle(
                          decoration: todo.isDone
                              ? TextDecoration.lineThrough
                              : null,
                        ),
                      ),
                      subtitle: todo.description.isNotEmpty
                          ? Text(todo.description)
                          : null,
                      trailing: Icon(Icons.chevron_right),
                    ),
                  ),
                );
              },
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final result = await Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => AddTodoScreen()),
          );
          if (result != null) {
            _addTodo(result['title'], result['description']);
          }
        },
        child: Icon(Icons.add),
        backgroundColor: Colors.deepPurple,
      ),
    );
  }
}

import 'package:flutter/material.dart';

class AddTodoScreen extends StatefulWidget {
  @override
  _AddTodoScreenState createState() => _AddTodoScreenState();
}

class _AddTodoScreenState extends State<AddTodoScreen> {
  final _titleController = TextEditingController();
  final _descriptionController = TextEditingController();
  final _formKey = GlobalKey<FormState>();

  @override
  void dispose() {
    _titleController.dispose();
    _descriptionController.dispose();
    super.dispose();
  }

  void _saveTodo() {
    if (_formKey.currentState!.validate()) {
      Navigator.pop(context, {
        'title': _titleController.text,
        'description': _descriptionController.text,
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('새 할 일 추가'),
        backgroundColor: Colors.deepPurple,
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              TextFormField(
                controller: _titleController,
                decoration: InputDecoration(
                  labelText: '제목',
                  border: OutlineInputBorder(),
                  prefixIcon: Icon(Icons.title),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '제목을 입력하세요';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16),
              TextFormField(
                controller: _descriptionController,
                decoration: InputDecoration(
                  labelText: '설명 (선택사항)',
                  border: OutlineInputBorder(),
                  prefixIcon: Icon(Icons.description),
                ),
                maxLines: 3,
              ),
              SizedBox(height: 24),
              ElevatedButton(
                onPressed: _saveTodo,
                child: Padding(
                  padding: EdgeInsets.all(16),
                  child: Text('저장', style: TextStyle(fontSize: 18)),
                ),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.deepPurple,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

keytool -genkey -v -keystore ~/my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-key-alias

storePassword=비밀번호
keyPassword=비밀번호
keyAlias=my-key-alias
storeFile=/Users/사용자명/my-release-key.jks

android {
    ...
    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }
}

# AAB 파일 생성 (Play Store 권장)
flutter build appbundle

# APK 파일 생성
flutter build apk --release

# pubspec.yaml에 추가
dev_dependencies:
  flutter_launcher_icons: ^0.13.0

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"

# 실행
flutter pub run flutter_launcher_icons

flutter build ios --release

# 또는 Xcode에서
# Product > Archive > Distribute App

lib/
  ├── main.dart
  ├── core/
  │   ├── constants/
  │   ├── themes/
  │   └── utils/
  ├── data/
  │   ├── models/
  │   ├── repositories/
  │   └── services/
  ├── presentation/
  │   ├── screens/
  │   ├── widgets/
  │   └── providers/
  └── routes/
      └── app_routes.dart

class AppTheme {
  static ThemeData lightTheme = ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
    scaffoldBackgroundColor: Colors.white,
    appBarTheme: AppBarTheme(
      elevation: 0,
      centerTitle: true,
      backgroundColor: Colors.blue,
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
    ),
    inputDecorationTheme: InputDecorationTheme(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
      ),
      filled: true,
      fillColor: Colors.grey[100],
    ),
  );

  static ThemeData darkTheme = ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.dark,
    scaffoldBackgroundColor: Colors.grey[900],
    // 다크 모드 설정...
  );
}

Future<void> loadData() async {
  try {
    setState(() => isLoading = true);
    
    final data = await apiService.fetchData();
    
    setState(() {
      this.data = data;
      isLoading = false;
    });
  } on NetworkException catch (e) {
    _showError('인터넷 연결을 확인해주세요');
  } on ServerException catch (e) {
    _showError('서버 오류가 발생했습니다');
  } catch (e) {
    _showError('알 수 없는 오류가 발생했습니다');
  } finally {
    setState(() => isLoading = false);
  }
}

void _showError(String message) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text(message),
      backgroundColor: Colors.red,
      action: SnackBarAction(
        label: '재시도',
        textColor: Colors.white,
        onPressed: loadData,
      ),
    ),
  );
}

// test/widget_test.dart
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets('Counter increments test', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    
    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);
    
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();
    
    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}