Flutter란?

Flutter란?

Flutter는 Google에서 개발한 오픈소스 UI 프레임워크로, 하나의 코드베이스로 iOS, Android, 웹, 데스크톱(Windows, macOS, Linux) 등 여러 플랫폼에서 실행되는 애플리케이션을 만들 수 있습니다.

Dart 언어를 기반으로 하며, 빠른 개발 속도와 아름다운 UI, 뛰어난 성능을 제공하는 것이 특징입니다.

---

1️⃣ Flutter의 핵심 개념

🔹 Dart 프로그래밍 언어

Flutter는 Dart라는 언어를 사용합니다. Dart는 JIT(Just-In-Time)과 AOT(Ahead-Of-Time) 컴파일을 지원하여 개발 중 빠른 Hot Reload와 최적화된 성능을 제공합니다.
또한, 객체 지향 언어이며, Java나 JavaScript와 유사한 문법을 가지고 있어 익히기 쉽습니다.

🔹 위젯 기반 UI 구성

Flutter의 모든 요소는 **위젯(Widget)**으로 구성됩니다.
👉 버튼, 텍스트, 이미지 등 기본적인 요소부터 레이아웃 구조까지 모두 위젯입니다.

위젯은 크게 두 가지로 나뉩니다.

1. StatelessWidget (변하지 않는 UI)
2. StatefulWidget (동적으로 변하는 UI)

📌 예제: 기본적인 StatelessWidget

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('Flutter Example')),
        body: Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}

---

2️⃣ Flutter의 주요 특징

✅ 1. 단일 코드베이스, 멀티 플랫폼 지원

• 한 번의 코드 작성으로 iOS, Android, 웹, 데스크톱에서 동작
• 유지보수 비용 절감

✅ 2. Hot Reload (빠른 개발 속도)

• 코드 수정 후 즉시 반영
• UI 및 로직 변경 사항을 바로 테스트 가능

✅ 3. 고성능 렌더링 엔진 (Skia 사용)

• Flutter는 자체 그래픽 엔진 Skia를 사용하여 네이티브 성능에 가깝게 동작
• 안드로이드/iOS 네이티브 구성 요소를 거치지 않고 직접 UI를 렌더링
• 부드러운 애니메이션 (초당 60~120FPS) 제공

✅ 4. 다양한 UI 커스터마이징 가능

• **Material Design (Android 스타일)**과 Cupertino (iOS 스타일) 지원
• 네이티브 UI와 차별화된 독창적인 UI 구현 가능

✅ 5. 네이티브 기능 연동 가능

• 카메라, 위치 정보, 네트워크, 센서 등 네이티브 기능을 쉽게 호출할 수 있음
• flutter plugin을 이용해 안드로이드(Java/Kotlin), iOS(Swift/Object-C)와 연동 가능

---

3️⃣ Flutter의 주요 구성 요소

🔹 Flutter의 기본 구조

Flutter 앱은 기본적으로 3가지 핵심 요소로 구성됩니다.

1. Framework (Dart로 작성)
   • UI 요소: 위젯, 레이아웃, 애니메이션
   • 로직 처리: 상태 관리, 이벤트 처리
2. Engine (C++ 기반 Skia 엔진)
   • UI 렌더링, 텍스트 처리, 그래픽 가속
3. Embedder (플랫폼별 네이티브 코드)
   • 안드로이드 (Java/Kotlin)
   • iOS (Objective-C/Swift)

---

4️⃣ Flutter의 주요 위젯

Flutter에서 UI를 구성할 때 가장 많이 사용하는 기본 위젯을 소개합니다.

🎨 기본 위젯

위젯설명

Text	텍스트 출력
Image	이미지 표시
Icon	아이콘 표시
Button	버튼 (ElevatedButton, TextButton 등)
TextField	텍스트 입력 필드
Scaffold	기본 레이아웃 구조 (AppBar, Body, Floating Action Button)

📌 예제: ElevatedButton을 사용한 클릭 이벤트 처리

ElevatedButton(
  onPressed: () {
    print("버튼 클릭됨");
  },
  child: Text("클릭하세요"),
)

📏 레이아웃 위젯

위젯설명

Row	가로 방향 정렬
Column	세로 방향 정렬
Container	패딩, 마진, 색상, 크기 조절
Stack	겹쳐진 레이아웃 구성
ListView	스크롤 가능한 리스트

📌 예제: Row와 Column을 사용한 레이아웃

Column(
  children: [
    Text("첫 번째 줄"),
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("가운데 "),
        Text("정렬된 "),
        Text("텍스트")
      ],
    ),
  ],
)

---

5️⃣ Flutter의 상태 관리

Flutter에서는 여러 가지 방식으로 상태 관리를 할 수 있습니다.

✅ 1. setState() (기본 방식)

• 간단한 UI 변경 시 사용

 

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("카운트: $count"),
        ElevatedButton(
          onPressed: () {
            setState(() {
              count++;
            });
          },
          child: Text("증가"),
        )
      ],
    );
  }
}

✅ 2. Provider (권장 방식)

• Flutter 팀이 공식적으로 추천하는 상태 관리 방법
• 성능 최적화 및 코드 분리가 쉬움

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

---

6️⃣ Flutter의 활용 사례

• Google Pay
• eBay Motors
• BMW
• Alibaba
• Philips Hue

---

7️⃣ Flutter 개발 환경 설정

📌 설치 과정

1️⃣ Flutter 공식 사이트에서 설치
2️⃣ Android Studio 또는 Visual Studio Code 설정
3️⃣ flutter doctor 명령어로 환경 확인
4️⃣ flutter create my_app으로 프로젝트 생성

---

8️⃣ Flutter의 장단점

✅ 장점

✔ 빠른 개발 (Hot Reload)
✔ 네이티브 성능
✔ 다양한 플랫폼 지원
✔ 커스터마이징이 쉬운 UI

❌ 단점

❌ 앱 크기가 크다
❌ Dart 언어 학습 필요
❌ iOS 빌드 속도가 상대적으로 느릴 수 있음