Flutter 앱에 Firebase 추가


기본 요건

  • 원하는 편집기 또는 IDE를 설치합니다.

  • 실제 Apple 기기를 설정하거나 시뮬레이터를 사용하여 앱을 실행합니다.

  • Flutter 앱이 다음 플랫폼 버전 이상을 타겟팅하는지 확인합니다.

    • iOS 13
    • macOS 10.15

  • 다음을 비롯하여 특정 운영체제에 맞는 Flutter를 설치합니다.

    • Flutter SDK
    • 지원 라이브러리
    • 플랫폼별 소프트웨어 및 SDK

  • Google 계정을 사용하여 Firebase에 로그인합니다.

아직 Flutter 앱이 없다면 시작하기: 시험 사용을 완료하여 선호하는 편집기나 IDE를 통해 새 Flutter 앱을 만들 수 있습니다.

1단계: 필수 명령줄 도구 설치

  1. 아직 설치하지 않았으면 Firebase CLI를 설치합니다.

  2. 다음 명령어를 실행하여 Google 계정으로 Firebase에 로그인합니다.

    firebase login

  3. 디렉터리에서 다음 명령어를 실행하여 FlutterFire CLI를 설치합니다.

    dart pub global activate flutterfire_cli

2단계: Firebase를 사용하도록 앱 구성

FlutterFire CLI를 사용하여 Firebase에 연결하도록 Flutter 앱을 구성합니다.

Flutter 프로젝트 디렉터리에서 다음 명령어를 실행하여 앱 구성 워크플로를 시작합니다.

flutterfire configure


3단계: 앱에서 Firebase 초기화

  1. Flutter 프로젝트 디렉터리에서 다음 명령어를 실행하여 core 플러그인을 설치합니다.

    flutter pub add firebase_core

  2. Flutter 프로젝트 디렉터리에서 다음 명령어를 실행하여 Flutter 앱의 Firebase 구성이 최신 상태인지 확인합니다.

    flutterfire configure

  3. lib/main.dart 파일에서 Firebase core 플러그인 및 앞에서 생성한 구성 파일을 가져옵니다.

    import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

  4. 또한 lib/main.dart 파일에서 구성 파일로 내보낸 DefaultFirebaseOptions 객체를 사용하여 Firebase를 초기화합니다.

    WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());

  5. Flutter 애플리케이션을 다시 빌드합니다.

    flutter run

데모 프로젝트를 사용하려면 Firebase 에뮬레이터를 시작하고 lib/main.dart 파일에서 demoProjectId(demo-로 시작해야 함)를 사용하여 Firebase를 초기화합니다.

  await Firebase.initializeApp(
    demoProjectId: "demo-project-id",
  );

4단계: Firebase 플러그인 추가

각 Firebase 제품에 대해 하나씩 여러 Firebase Flutter 플러그인을 사용하여 Flutter 앱에서 Firebase에 액세스합니다(예: Cloud Firestore, Authentication, Analytics 등).

Flutter가 멀티 플랫폼 프레임워크이기 때문에 각 Firebase 플러그인은 Apple, Android, 웹 플랫폼에 적용될 수 있습니다. 따라서 Firebase 플러그인을 Flutter 앱에 추가하면 Apple, Android, 앱의 웹 버전에 사용됩니다.

Firebase Flutter 플러그인을 추가하는 방법은 다음과 같습니다.

  1. Flutter 프로젝트 디렉터리에서 다음 명령어를 실행합니다.

    flutter pub add PLUGIN_NAME

  2. Flutter 프로젝트 디렉터리에서 다음 명령어를 실행합니다.

    flutterfire configure

    이 명령어를 실행하면 Flutter 앱의 Firebase 구성이 최신 상태인지 확인하고 Android의 Crashlytics 및 Performance Monitoring의 경우 필수 Gradle 플러그인이 앱에 추가됩니다.

  3. 완료되면 Flutter 프로젝트를 다시 빌드합니다.

    flutter run

다 되었습니다. Flutter 앱이 등록되고 Firebase를 사용하도록 구성되었습니다.

사용 가능한 플러그인

제품 플러그인 이름 iOS Android 웹 기타 Apple
(macOS 등)		 Windows
Analytics firebase_analytics
베타
App Check firebase_app_check
베타
Authentication firebase_auth
베타 베타
Cloud Firestore cloud_firestore
베타 베타
Cloud Functions cloud_functions
베타
Cloud Messaging firebase_messaging
베타
Cloud Storage firebase_storage
베타 베타
Crashlytics firebase_crashlytics
베타
Dynamic Links firebase_dynamic_links
In-App Messaging firebase_in_app_messaging
Firebase 설치 firebase_app_installations
베타
ML 모델 다운로더 firebase_ml_model_downloader
베타
Performance Monitoring firebase_performance
Realtime Database firebase_database
베타
Remote Config firebase_remote_config
베타
Vertex AI in Firebase firebase_vertexai
베타

Analytics에서 예시 앱 사용해 보기

모든 패키지와 마찬가지로 firebase_analytics 플러그인은 프로그램 예시와 함께 제공됩니다.

  1. 이미 Firebase를 사용하도록 구성한 Flutter 앱을 엽니다(이 페이지의 안내 참조).

  2. 앱의 lib 디렉터리에 액세스한 후에 기존 main.dart 파일을 삭제합니다.

  3. Google Analytics 프로그램 예시 저장소에서 다음의 두 파일을 복사하여 앱의 lib 디렉터리에 붙여넣습니다.

    • main.dart
    • tabs_page.dart

  4. Flutter 앱을 실행합니다.

  5. Firebase Console에서 앱의 Firebase 프로젝트로 이동한 후 왼쪽 탐색 메뉴에서 애널리틱스를 클릭합니다.

    1. 대시보드를 클릭합니다. Analytics가 제대로 작동 중이면 대시보드의 '지난 30분 동안의 활성 사용자' 패널에 활성 사용자가 표시됩니다. 이 패널에 정보가 표시되는 데 시간이 다소 걸릴 수 있습니다.

    2. DebugView를 클릭합니다. 기능을 사용 설정하여 프로그램 예시에서 생성된 모든 이벤트가 표시되도록 합니다.

Analytics 설정에 대한 자세한 내용은 iOS+, Android, 웹 시작 가이드를 참조하세요.

다음 단계