[Flutter] Firebase Android 적용하기!

https://firebase.google.com/docs/flutter/setup?hl=ko 

Flutter 앱에 Firebase 추가

 

파이어베이스 공식 문서에 Flutter 앱에 Firebase추가하기를 참고하여 작업했다!

 

1단계: Firebase 프로젝트 만들기

Firebase를 Flutter 앱에 추가하려면 먼저 앱에 연결할 Firebase 프로젝트를 만드세요. Firebase 프로젝트에 대한 자세한 내용은 Firebase 프로젝트 이해를 참조하세요.

 

2단계: Firebase  Android 등록  및 Flutter프로젝트에 Firebase 구성 파일 추가

파이어베이스 프로젝트 만들기는 간단하다!

프로젝트를 생성하면

안드로이드 버튼을 클릭한다!

그러면 Android앱에 파이어베이스 추가하는 창이 뜨는데 

앱 닉네임 디버그 서명 인증서는 여기에서는 진행하지 않고 Android 패키지 이름만 추가한다.

참고로, Google 로그인 등을 사용하려면 반드시 디버그 서명 인증서 SHA-1를 등록해야한다!

Android 패키지 이름 

Flutter의 Android 패키지 이름은 프로젝트의 android/app 아래에 있는 build.gradle 파일을 열면 applicationId항목에 있는 값이 패키지 이름이다. 

defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.todo"
}

그런 다음 앱 등록을 누르면

google-services.json 다운로드 버튼이 보이는데 클릭 후 

다운로드한 파일을 프로젝트의 android/app 에 추가해준다.

google-services.json 파일에는 파이어베이스 관련 정보가 담겨 있으므로 유출되지 않도록 해야한다.

 

추가 하면 다음 버튼을 누른다.

 

Firebase SDK 추가

프로젝트 수준 build.gralde과 앱 수준 build.gradle 에 Firebase SDK를 추가해줘야한다.

 

프로젝트 수준의 build.gralde

Add this line 부분을 Flutter 프로젝트에 추가 할 예정이다.

classpath~ 부분 오른쪽에 아이콘을 클릭 하면 복사해진다. 

복사 한 후 android 폴더에 있는 build.gralde파일을 열고 dependencies 항목안에 추가해준다.

buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google()
        mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        //firebase
        classpath 'com.google.gms:google-services:4.3.10'
    }
}

앱 수준의 build.gradle

여기도 마찬가지로 Add this line 부분에 내용을 추가해준다.

(위에선 프로젝트 생성 시 애널리틱스 사용 설정을 해서 Firebase SDK for Google Analytics 부분에 대한 내용도 나왔다)

Add this line 부분을 복사 한 후 

android/app 폴더에 있는 build.gralde 파일을 열고 apply plugin 내용을 추가한다.

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.google.gms.google-services' //firebase

Google Analytics를 설정했다면 아래 내용도 추가! 

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    // Import the Firebase BoM
    implementation platform('com.google.firebase:firebase-bom:28.3.1')

    // Add the dependency for the Firebase SDK for Google Analytics
    // When using the BoM, don't specify versions in Firebase dependencies
    implementation 'com.google.firebase:firebase-analytics'
    
}

3단계: FlutterFire 플러그인 추가

Flutter는 플러그인을 사용하여 Firebase API 등 다양한 플랫폼별 서비스에 대한 액세스를 제공합니다. 플러그인에는 각 플랫폼의 서비스 및 API에 액세스하기 위한 플랫폼별 코드가 포함되어 있습니다.

Firebase_core를 추가하고 flutterfire 를 추가해야하는데 구글 애널리틱스를 사용하면 firebase_analytics플러그인을 추가해줘야합니다.

 

저같은 경우는 구글 애널리틱스도 사용해서 아래처럼 추가했습니다

flutter pub add firebase_core

flutter pub add firebase_analytics 

flutter pub add firebase_auth

flutter pub add cloud_firestore

 

Page 1 | Top Flutter packages

 

4단계: 플러터 위젯을 미리 준비하고 Firebase 사전 준비

main.dart 파일을 열고 firebase_core 를 import한 후 

아래 처럼 변경합니다.

import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

파이어 베이스를 초기화하여 Firestore를 사용할 수 있게 하는데,

비동기로 다뤄 runApp을 실행하므로 

WidgetsFlutterBinding.ensureInitialized(); 를 추가해줘야합니다.

또한 await 키워드를 사용했으므로 main()은 무조건  async 함수이어야 하기 때문에

main() async로 변경해줍니다.

 

이렇게 하고 플러터를 실행하면 끝!

 

구글 애널리틱스를 사용했기 때문에~ 아래처럼 사용자가 1뜨는거까지 확인 완료!