Flutter

기본 정보

• 이름: Flutter
• 분류: 크로스 플랫폼 UI 프레임워크
• 개발사: Google
• 최초 공개: 2017년
• 개발 언어: Dart
• 주요 용도: 모바일 앱, 웹 앱, 데스크톱 앱 개발
• 관련 주제: #Flutter #Dart #모바일 #크로스플랫폼 #앱개발

개요

Flutter는 Google이 개발한 오픈소스 UI 프레임워크이다.

하나의 코드베이스로 Android, iOS, Windows, macOS, Linux, Web 애플리케이션을 개발할 수 있으며, 자체 렌더링 엔진(Skia/Impeller)을 사용하여 일관된 UI와 높은 성능을 제공한다.

최근 스타트업과 기업에서 크로스 플랫폼 앱 개발을 위해 많이 사용하는 기술 중 하나이다.

주요 특징

• 하나의 코드로 여러 플랫폼 개발
• Hot Reload 지원
• 높은 UI 자유도
• Material Design 지원
• Cupertino(iOS) 디자인 지원
• 빠른 개발 속도
• 네이티브 수준의 성능 제공

구조

Flutter App

↓

Widget Tree

↓

Framework

↓

Rendering Engine

↓

Android

iOS

Windows

macOS

Linux

Web

지원 플랫폼

• Android
• iOS
• Windows
• macOS
• Linux
• Web

개발 언어

Flutter는 Dart 언어를 사용한다.

void main(){

  print("Hello Flutter");

}

Hello World

import 'package:flutter/material.dart';

void main(){

  runApp(

    MaterialApp(

      home: Scaffold(

        body: Center(

          child: Text("Hello Flutter"),

        ),

      ),

    ),

  );

}

Widget

Flutter의 모든 화면은 Widget으로 구성된다.

대표 Widget

• Text
• Container
• Row
• Column
• Stack
• ListView
• GridView
• Scaffold
• AppBar

StatelessWidget

상태가 변하지 않는 화면을 만들 때 사용한다.

class Home extends StatelessWidget{

  @override

  Widget build(BuildContext context){

    return Text("Hello");

  }

}

StatefulWidget

상태가 변경되는 화면을 만들 때 사용한다.

class Home extends StatefulWidget{

  @override

  State<Home> createState()=>_HomeState();

}

Layout

대표 레이아웃 Widget

• Row
• Column
• Expanded
• Flexible
• Stack
• Wrap
• SizedBox
• Padding
• Center

ListView

ListView.builder(

  itemCount:100,

  itemBuilder:(context,index){

    return Text("$index");

  },

)

대량 데이터를 효율적으로 표시할 수 있다.

Navigation

Navigator.push(

  context,

  MaterialPageRoute(

    builder:(_)=>Page2(),

  ),

);

화면 이동에 사용된다.

State Management

대표 방식

• setState
• Provider
• Riverpod
• Bloc
• GetX
• MobX

실무에서는 Provider와 Riverpod 사용 비중이 높다.

비동기 처리

Future<void> load() async{

  await Future.delayed(

    Duration(seconds:1)

  );

}

async/await를 사용하여 비동기 작업을 처리한다.

HTTP API

final response =

await http.get(

  Uri.parse(url)

);

REST API와 통신할 수 있다.

JSON 처리

final json =

jsonDecode(response.body);

API 데이터를 객체로 변환할 수 있다.

로컬 저장소

대표 패키지

• SharedPreferences
• Hive
• SQLite
• Isar

앱 설정이나 사용자 데이터를 저장할 때 사용한다.

대표 패키지

• http
• dio
• provider
• riverpod
• get
• image_picker
• shared_preferences
• flutter_secure_storage
• firebase_core

Firebase 연동

Flutter는 Firebase와 쉽게 연동할 수 있다.

지원 기능

• 로그인
• Push 알림
• Firestore
• Storage
• Analytics
• Crashlytics

앱 빌드

Android APK

flutter build apk

Android AAB

flutter build appbundle

iOS

flutter build ios

Web

flutter build web

Windows

flutter build windows

프로젝트 구조

lib/

android/

ios/

web/

windows/

linux/

macos/

assets/

pubspec.yaml

pubspec.yaml

프로젝트 설정 및 패키지를 관리하는 파일이다.

dependencies:

  flutter:

    sdk: flutter

  http: ^1.0.0

주요 활용 분야

• 모바일 앱
• 쇼핑몰 앱
• 커뮤니티 앱
• ERP 앱
• 관리자 앱
• 키오스크
• POS
• Web App
• Desktop App

장점

• 하나의 코드로 여러 플랫폼 개발
• 개발 속도가 빠름
• UI 자유도가 높음
• Hot Reload 지원
• 성능이 우수함
• Google 공식 지원

단점

• 앱 크기가 큰 편
• 네이티브 기능 사용 시 플랫폼별 코드 필요
• Dart 언어 학습 필요
• 일부 최신 OS 기능은 별도 플러그인 필요

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

• Flutter 최신 Stable 버전 사용
• 상태 관리는 Riverpod 또는 Provider 사용
• const Widget 적극 활용
• Dio를 이용한 API 통신
• Clean Architecture 적용
• MVVM 또는 Feature 기반 폴더 구조 사용
• 환경변수 분리(flutter_dotenv)
• go_router를 이용한 라우팅 관리
• freezed와 json_serializable로 모델 자동 생성
• CI/CD(Fastlane, GitHub Actions) 구축

Flutter와 함께 사용하는 기술

• Dart
• Firebase
• REST API
• SQLite
• Hive
• Riverpod
• Provider
• Git
• Docker
• Fastlane

대표 개발 도구

• Android Studio
• Visual Studio Code
• IntelliJ IDEA
• Xcode
• Flutter DevTools

관련 문서

• Dart
• Firebase
• REST API
• Riverpod
• Provider
• SQLite
• Hive
• Android
• iOS
• 모바일 앱 개발

출처

• Flutter 공식 홈페이지
• Flutter 공식 문서
• Dart 공식 문서