Flutter 입문

# Flutter 입문 가이드

## 학습 목표
Flutter로 iOS/Android 앱을 동시에 개발합니다.

## 1. Flutter란?
Google이 만든 크로스플랫폼 UI 프레임워크입니다.
- 단일 코드베이스로 iOS/Android/Web
- 빠른 핫 리로드
- 풍부한 위젯 라이브러리
- 네이티브 성능

## 2. 설치
flutter.dev에서 SDK 다운로드
환경변수 PATH에 flutter/bin 추가

flutter doctor
flutter create myapp
cd myapp
flutter run

## 3. 프로젝트 구조
lib/main.dart - 앱 시작점
pubspec.yaml - 의존성 관리
android/ - Android 설정
ios/ - iOS 설정

## 4. 기본 앱 구조
import "package:flutter/material.dart";

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

class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("My App")),
body: Center(child: Text("Hello Flutter")),
),
);
}
}

## 5. StatelessWidget vs StatefulWidget
StatelessWidget - 상태 없음:
class Greeting extends StatelessWidget {
final String name;
Greeting({required this.name});

Widget build(BuildContext context) {
return Text("Hello, $name");
}
}

StatefulWidget - 상태 있음:
class Counter extends StatefulWidget {
_CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
int count = 0;

Widget build(BuildContext context) {
return Column(
children: [
Text("Count: $count"),
ElevatedButton(
onPressed: () => setState(() => count++),
child: Text("Add"),
),
],
);
}
}

## 6. 기본 위젯
레이아웃:
Container, Row, Column, Stack
Padding, Center, Expanded, Flexible
ListView, GridView

입력:
Text, TextField, TextFormField
ElevatedButton, TextButton, IconButton
Checkbox, Switch, Radio, Slider

표시:
Image, Icon, CircularProgressIndicator
Card, ListTile, Chip

## 7. 레이아웃
Column (세로):
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [Text("A"), Text("B")],
)

Row (가로):
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [Icon(Icons.star), Text("Rating")],
)

Stack (겹침):
Stack(
children: [
Image.network(url),
Positioned(bottom: 10, child: Text("Caption")),
],
)

## 8. 네비게이션
기본 이동:
Navigator.push(context, MaterialPageRoute(
builder: (context) => DetailPage(),
));

뒤로가기:
Navigator.pop(context);

Named Routes:
MaterialApp(
routes: {
"/": (context) => HomePage(),
"/detail": (context) => DetailPage(),
},
)
Navigator.pushNamed(context, "/detail");

## 9. HTTP 통신
pubspec.yaml에 http 추가:
dependencies:
http: ^1.1.0

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

Future<List<User>> fetchUsers() async {
final response = await http.get(Uri.parse("https://api.example.com/users"));
if (response.statusCode == 200) {
final List data = json.decode(response.body);
return data.map((e) => User.fromJson(e)).toList();
}
throw Exception("Failed to load");
}

## 10. 상태 관리
Provider:
dependencies:
provider: ^6.0.0

ChangeNotifierProvider(
create: (context) => CartModel(),
child: MyApp(),
)

Consumer<CartModel>(
builder: (context, cart, child) {
return Text("Items: ${cart.items.length}");
},
)

context.read<CartModel>().addItem(item);
context.watch<CartModel>().items;

## 11. 로컬 저장
SharedPreferences:
final prefs = await SharedPreferences.getInstance();
await prefs.setString("token", "abc123");
final token = prefs.getString("token");

SQLite (sqflite):
final db = await openDatabase("app.db");
await db.insert("users", {"name": "Kim"});
final users = await db.query("users");

## 12. 빌드 및 배포
Android APK:
flutter build apk --release

Android App Bundle:
flutter build appbundle

iOS:
flutter build ios --release

Web:
flutter build web

## 추천 학습 순서
1. Dart 언어 기초
2. 기본 위젯 익히기
3. 레이아웃 마스터
4. 상태 관리 이해
5. API 연동 및 배포