Flutter 패키지 추가 및 실행 명령어 정리

Hyunsoo Jung·2024년 2월 20일
flutter

Flutter

목록 보기
7/13

Flutter 프로젝트에서 외부 기능을 사용하려면 필요한 패키지를 pubspec.yaml에 추가해야 한다.
패키지를 추가하는 방법은 크게 두 가지가 있다.

1. 터미널에서 flutter pub add 명령어 사용
2. pubspec.yaml 파일에 직접 작성

보통 Android Studio 터미널에서 flutter pub add 패키지명을 실행하면 pubspec.yaml에 자동으로 추가된다.

1. 기본 패키지 추가 방법

Android Studio 하단의 Terminal을 열고 다음 형식으로 실행한다.

flutter pub add 패키지명

예를 들어 http 패키지를 추가하려면 다음처럼 입력한다.

flutter pub add http

이 명령어를 실행하면 pubspec.yaml의 dependencies에 자동으로 추가된다.

dependencies:
  http: 최신버전

2. 자주 사용하는 패키지 정리

프로젝트에서 사용할 수 있는 주요 패키지는 다음과 같다.

flutter pub add http
flutter pub add shared_preferences
flutter pub add url_launcher
flutter pub add sqflite
flutter pub add flutter_rating_bar
flutter pub add intl
flutter pub add get
flutter pub add flutter_svg
flutter pub add dio
flutter pub add flutter_secure_storage

각 패키지의 역할은 다음과 같다.

http
- HTTP 요청 처리
- 서버 API 호출에 사용

shared_preferences
- 간단한 데이터를 로컬 저장소에 저장
- 로그인 여부, 설정값 저장에 사용

url_launcher
- 외부 브라우저, 전화, 이메일, 링크 실행에 사용

sqflite
- SQLite 기반 로컬 데이터베이스 사용
- 앱 내부 DB 관리에 사용

flutter_rating_bar
- 별점 UI 표시

intl
- 날짜, 숫자, 다국어 처리
- 국제화와 지역화에 사용

get
- 상태 관리, 라우팅, 의존성 관리에 사용

flutter_svg
- SVG 이미지 표시

dio
- HTTP 클라이언트
- API 요청, Interceptor, 파일 업로드 등에 사용

flutter_secure_storage
- 민감한 데이터 보안 저장
- accessToken, refreshToken 저장에 사용

간단히 구분하면 다음과 같다.

서버 통신
- http
- dio

로컬 저장
- shared_preferences
- flutter_secure_storage
- sqflite

화면 UI
- flutter_rating_bar
- flutter_svg
- skeletons
- badges

라우팅 / 상태 관리
- get
- go_router
- flutter_riverpod

Firebase
- firebase_core
- cloud_firestore

3. http와 dio 차이

http와 dio는 둘 다 서버 통신에 사용한다.

하지만 기능 차이가 있다.

http
- 기본적인 HTTP 요청에 적합
- 구조가 단순함
- 가벼운 API 호출에 사용하기 좋음

dio
- 기능이 더 많음
- Interceptor 사용 가능
- Token 자동 추가, 로그 출력, 에러 공통 처리에 유리
- 파일 업로드 / 다운로드에 유리

간단한 프로젝트에서는 http만으로도 충분하다.

하지만 로그인 토큰, 공통 헤더, API 에러 처리, 파일 업로드가 필요하다면 dio가 더 편하다.

4. shared_preferences와 flutter_secure_storage 차이

둘 다 로컬 저장소에 값을 저장할 수 있지만 목적이 다르다.

shared_preferences
- 간단한 설정값 저장
- 보안이 중요하지 않은 값 저장

flutter_secure_storage
- 민감한 값 저장
- 토큰, 인증 정보 저장

예시로 보면 다음과 같다.

다크모드 여부
-> shared_preferences

자동 로그인 여부
-> shared_preferences

accessToken
-> flutter_secure_storage

refreshToken
-> flutter_secure_storage

즉, 보안이 중요한 값은 shared_preferences보다 flutter_secure_storage에 저장하는 것이 좋다.

5. 추가 UI 패키지 설치

다음 패키지들은 UI 구성에 도움을 준다.

flutter pub add skeletons
flutter pub add badges

역할은 다음과 같다.

skeletons
- 데이터 로딩 중 스켈레톤 UI 표시

badges
- 아이콘이나 버튼 위에 숫자 배지 표시

예를 들어 알림 개수를 표시할 때 badges를 사용할 수 있다.

알림 아이콘
   |
   v
오른쪽 위에 숫자 배지 표시

6. 유틸 패키지 설치

다음 패키지들은 앱 내부 로직을 구현할 때 자주 사용된다.

flutter pub add uuid
flutter pub add debounce_throttle

역할은 다음과 같다.

uuid
- 고유 ID 생성
- 게시글 ID, 메모 ID, 임시 객체 ID 생성에 사용

debounce_throttle
- 검색어 입력처럼 너무 자주 발생하는 이벤트 제어
- debounce, throttle 처리에 사용

예를 들어 검색창에서 글자를 입력할 때마다 API를 호출하면 요청이 너무 많이 발생한다.

이때 debounce를 사용하면 입력이 잠시 멈춘 뒤 한 번만 요청할 수 있다.

사용자 입력
   |
   v
짧은 시간 안에 계속 입력됨
   |
   v
바로 API 호출하지 않음
   |
   v
입력이 멈추면 API 호출

7. 라우팅 패키지 추가

라우팅을 위해 go_router를 사용할 수 있다.

go_router는 명령어로 추가해도 되고, pubspec.yaml에 직접 작성해도 된다.

flutter pub add go_router

또는 직접 작성한다.

dependencies:
  go_router: ^4.2.2

go_router는 화면 이동을 관리할 때 사용한다.

go_router
- 선언형 라우팅
- 화면 이동 관리
- URL 기반 라우팅 지원
- Flutter Web과 함께 사용하기 좋음

8. Riverpod 추가

flutter_riverpod은 상태 관리 라이브러리다.

직접 pubspec.yaml에 추가할 수 있다.

dependencies:
  flutter_riverpod: ^1.0.4

역할은 다음과 같다.

flutter_riverpod
- 상태 관리
- 의존성 주입처럼 사용 가능
- ViewModel / Controller 상태 관리
- 전역 상태 관리에 사용

프로젝트에서 GetX를 사용할지 Riverpod을 사용할지는 하나로 정하는 것이 좋다.

GetX
- get 패키지 사용

Riverpod
- flutter_riverpod 사용

둘 다 상태 관리가 가능하기 때문에, 작은 프로젝트가 아니라면 한 가지 방식을 정해서 일관되게 사용하는 것이 좋다.

9. Retrofit 코드 생성 패키지 추가

Dio와 함께 Retrofit 구조를 사용하려면 코드 생성 패키지가 필요하다.

이 경우 dev_dependencies에 다음 항목을 추가한다.

dev_dependencies:
  retrofit_generator: ">=7.0.0 <8.0.0"
  build_runner: ">=2.3.0 <4.0.0"
  json_serializable: ^6.6.2

각 패키지의 역할은 다음과 같다.

retrofit_generator
- Retrofit API 코드 자동 생성

build_runner
- 코드 생성 실행 도구

json_serializable
- JSON 직렬화 / 역직렬화 코드 생성

Retrofit 구조에서는 보통 다음 파일들이 자동 생성된다.

.g.dart
- JSON 직렬화 코드

.g.dart 또는 .retrofit.dart
- Retrofit API 구현 코드

코드 생성을 실행하려면 다음 명령어를 사용한다.

flutter pub run build_runner build

파일 변경을 감지해서 자동 생성하고 싶다면 watch를 사용할 수 있다.

flutter pub run build_runner watch

최근 프로젝트에서는 다음 명령어를 사용할 수도 있다.

dart run build_runner build
dart run build_runner watch

10. Firebase 패키지 추가

Firebase를 사용하려면 기본적으로 firebase_core를 추가해야 한다.

Firestore를 사용한다면 cloud_firestore도 추가한다.

flutter pub add firebase_core
flutter pub add cloud_firestore

각 패키지의 역할은 다음과 같다.

firebase_core
- Flutter 앱에서 Firebase 초기화

cloud_firestore
- Firebase Firestore DB 사용

Firebase 설정을 쉽게 하기 위해 FlutterFire CLI를 설치한다.

dart pub global activate flutterfire_cli

설치 후 프로젝트에 Firebase 설정을 연결한다.

flutterfire configure --project=medical-block-app

이 명령어를 실행하면 플랫폼별 Firebase 설정이 생성된다.

flutterfire configure
- Firebase 프로젝트 선택
- Android / iOS / Web 등 플랫폼 설정
- firebase_options.dart 생성

11. Flutter Web 실행

Flutter Web을 Chrome에서 실행하려면 다음 명령어를 사용한다.

flutter run -d chrome

사용자가 작성한 명령어처럼 HTML renderer를 지정할 수도 있다.

flutter run -d chrome --web-renderer html

역할은 다음과 같다.

flutter run -d chrome
- Chrome에서 Flutter Web 실행

--web-renderer html
- HTML 렌더러 사용
- Web 환경에서 렌더링 방식 지정

단, Flutter 버전이나 환경에 따라 --web-renderer 옵션 지원 방식이 다를 수 있다.

옵션 관련 오류가 발생하면 다음처럼 실행한다.

flutter run -d chrome

12. 전체 명령어 정리

자주 사용하는 설치 명령어를 한 번에 정리하면 다음과 같다.

flutter pub add http
flutter pub add shared_preferences
flutter pub add url_launcher
flutter pub add sqflite
flutter pub add flutter_rating_bar
flutter pub add intl
flutter pub add get
flutter pub add flutter_svg
flutter pub add dio
flutter pub add flutter_secure_storage
flutter pub add skeletons
flutter pub add badges
flutter pub add uuid
flutter pub add debounce_throttle
flutter pub add firebase_core
flutter pub add cloud_firestore

라우팅 패키지도 명령어로 추가할 수 있다.

flutter pub add go_router

Firebase CLI 설정 명령어는 다음과 같다.

dart pub global activate flutterfire_cli
flutterfire configure --project=medical-block-app

코드 생성 명령어는 다음과 같다.

flutter pub run build_runner build
flutter pub run build_runner watch

또는 다음 명령어도 사용할 수 있다.

dart run build_runner build
dart run build_runner watch

13. pubspec.yaml 예시

pubspec.yaml에 직접 작성하면 다음과 같은 형태가 된다.

dependencies:
  flutter:
    sdk: flutter

  http: ^1.0.0
  shared_preferences: ^2.0.0
  url_launcher: ^6.0.0
  sqflite: ^2.0.0
  flutter_rating_bar: ^4.0.0
  intl: ^0.19.0
  get: ^4.0.0
  flutter_svg: ^2.0.0
  dio: ^5.0.0
  flutter_secure_storage: ^9.0.0
  skeletons: ^0.0.3
  go_router: ^4.2.2
  badges: ^3.0.0
  uuid: ^4.0.0
  debounce_throttle: ^2.0.0
  firebase_core: ^3.0.0
  cloud_firestore: ^5.0.0
  flutter_riverpod: ^1.0.4

dev_dependencies:
  flutter_test:
    sdk: flutter

  retrofit_generator: ">=7.0.0 <8.0.0"
  build_runner: ">=2.3.0 <4.0.0"
  json_serializable: ^6.6.2

단, 실제 프로젝트에서는 패키지 버전이 Flutter SDK 버전과 맞아야 한다.

그래서 가능하면 다음 명령어로 추가하는 것이 안전하다.

flutter pub add 패키지명

명령어로 추가하면 현재 Flutter 환경에 맞는 호환 버전을 자동으로 선택할 수 있다.

14. 정리

Flutter에서 외부 기능을 사용하려면 필요한 패키지를 추가해야 한다.

핵심은 다음과 같다.

패키지 추가
-> flutter pub add 패키지명

Web 실행
-> flutter run -d chrome

코드 생성
-> dart run build_runner build

Firebase 설정
-> dart pub global activate flutterfire_cli
-> flutterfire configure --project=프로젝트ID

패키지 역할은 다음처럼 구분할 수 있다.

서버 통신
- http
- dio
- retrofit_generator

로컬 저장
- shared_preferences
- flutter_secure_storage
- sqflite

UI
- flutter_rating_bar
- flutter_svg
- skeletons
- badges

상태 관리 / 라우팅
- get
- flutter_riverpod
- go_router

유틸
- uuid
- debounce_throttle
- intl

Firebase
- firebase_core
- cloud_firestore
- flutterfire_cli

즉, 패키지를 무작정 추가하기보다 기능별로 나눠서 관리하면 pubspec.yaml을 훨씬 깔끔하게 유지할 수 있다.

profile
Hyunsoo Jung
Jetpack Compose 리팩터링&운영 경력 및 Flutter 경험을 보유한 앱 개발자
이전 포스트

Flutter 코딩셰프 맛집 정리: Lotto 화면과 로그인 화면에서 사용한 주요 위젯

다음 포스트

Flutter Kakao login 설정

0개의 댓글