Flutter 앱에 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, 웹 시작 가이드를 참조하세요.

웹 앱 빌드 관련 참고사항

신뢰할 수 있는 유형 지원

Flutter용 Firebase SDK는 DOM 기반(클라이언트 측) XSS 공격을 방지하기 위해 신뢰할 수 있는 유형의 사용을 지원합니다. 앱에 신뢰할 수 있는 유형 적용을 사용 설정하면 Firebase SDK에서 이름이 flutterfire-firebase_core, flutterfire-firebase_auth 등인 커스텀 신뢰할 수 있는 유형 정책을 사용하여 DOM에 스크립트를 삽입합니다.

Firebase JavaScript SDK 자동 삽입 사용 중지

기본적으로 Firebase Flutter SDK는 웹용으로 빌드할 때 Firebase JavaScript SDK를 자동으로 삽입합니다. Firebase JavaScript SDK가 자동 삽입되지 않게 하려면 다음 단계를 따르세요.

  1. 자동 삽입 스크립트를 무시하려면 Flutter 프로젝트의 web/index.html 파일 내 <script> 태그에 다음 속성을 추가합니다.

    <!-- Add this property inside a <script> tag within your "web/index.html" file in your Flutter project -->
<!-- Put in the names of all the plugins you wish to ignore: -->
window.flutterfire_ignore_scripts = ['analytics', 'firestore'];

  2. 다음 대안 중 하나를 사용하여 스크립트를 수동으로 로드합니다.

    • window.addEventListener 콜백 내에서 web/index.html 파일에 SDK를 명시적으로 추가합니다.

        window.addEventListener('load', async function (ev) {
    window.firebase_firestore = await import("https://www.gstatic.com/firebasejs/10.14.0/firebase-firestore.js");
    window.firebase_analytics = await import("https://www.gstatic.com/firebasejs/10.14.0/firebase-analytics.js");

    _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
      // rest of the code

    • 또는 'gstatic' 도메인에서 플러그인의 Firebase JavaScript SDK 코드를 다운로드하고 JavaScript 파일에 저장하여 프로젝트 내에 보관하고 수동으로 로드합니다.

        // "web/my-analytics.js" & "web/my-firestore.js" file loaded as a script into your "web/index.html" file: 
  window.addEventListener('load', async function (ev) {
    window.firebase_analytics = await import("./my-analytics.js");
    window.firebase_firestore = await import("./my-firestore.js");

    _flutter.loader.loadEntrypoint().then(function (engineInitializer) {
      // rest of the code

다음 단계