[Flutter] 플러터 3.0 Firebase 설치

서론

Flutter 3.0에 와서 파이어베이스 설치가 간편해졌다고 하는데, 개인적으로는 가이드문서를 보고 따라했다가 오류 대잔치였다.

기준은 윈도우 & 안드로이드스튜디오 & 안드로이드 에뮬레이터다.

기존에 만들어준 플러터 프로젝트가 있다는 가정하에 진행한다.

아래 내용만 따라해서 안될 수도 있다. 여러 오류를 만났을때 많은 삽질을 했고 최종적으로 성공한 디버깅포인트만 작성했는데, 중간 과정이 알게모르게 필요한 작업이었을수도 있다. 그래도 중간과정도 기억나는건 가능한 다 작성했다.

사진 설명이 친절하지 못해서 참고사이트 중 아래 유튜브를 보고 따라하다가 오류가 발생한다면 해당 글을 참고하는 방법도 도움이 될 것 같다.

https://www.youtube.com/watch?v=J3OqrOJpPVQ&t=685s&pp=ygUQZmlyZWJhc2UgZmx1dHRlcg%3D%3D

레퍼런스 문서

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

https://firebase.google.com/docs/cli?authuser=1&hl=ko#install_the_firebase_cli

참고 사이트

https://github.com/invertase/flutterfire_cli/issues/126

https://velog.io/@nicesawo/FlutterFireBase-%EC%97%B0%EB%8F%99-%EA%B8%B0%EB%B3%B8-%EC%A7%80%EC%B9%A8%EC%84%9C

https://dev-yakuza.posstree.com/ko/flutter/firebase/core/

https://www.youtube.com/watch?v=J3OqrOJpPVQ&t=685s&pp=ygUQZmlyZWJhc2UgZmx1dHRlcg%3D%3D

https://stackoverflow.com/questions/72834997/unable-to-initialize-firebaseapp-flutter\

https://developermom.tistory.com/entry/%ED%8C%8C%EC%9D%B4%EC%96%B4%EB%B2%A0%EC%9D%B4%EC%8A%A4-Missing-googleappid-Firebase-Analytics-disabled

https://bangu4.tistory.com/351

https://medium.com/flutter-community/flutterfire-ui-simplifying-social-logins-in-flutter-27cc0f17890a

설치가 잘 된 경우

안드로이드의 경우 앱을 실행했을 때 아래와 같이 FirebaseApp initialization successful이 logcat에 찍혀야한다.

IOS는 모르겠다.

FirebaseApp initialization unsuccessful이라고 뜨면 gradle 설치를 의심해봐야 한다. 가이드문서만 따라하면 이 항목이 없다. 자세한 내용은 아래에 있다.

Firebase CLI에서 syntax 오류가 나는 경우

아래와 같은 오류가 발생할때가 있는데, 진행해도 Firebase 수행에는 문제가 없었다.

Firebase CLI에서 flutterfire configure 수행시 아래와 같은 오류가 발생하는 경우

flutterfire configure를 Firebase CLI가 아닌 terminal에서 수행한다. 물론 안드로이드스튜디오의 terminal을 이용해도 된다. 

그외 오류가 발생한다면 추정되는 것들

  • 안드로이드 기준 minSDK는 19이상이어야 한다.
  • 안드로이드 기준 에뮬레이터 사용시 구글플레이가 설치되어있지 않다면 오류가 발생하는것같다. 에뮬레이터는 구글플레이용이 따로 있다.
  • 안드로이드 기준 인터넷 퍼미션이 필요하다. 다만 자동으로 추가되는것 같다.

Firebase 설치과정

Firebase CLI 설치

https://firebase.google.com/docs/cli?hl=ko#setup_update_cli

윈도우 기준, 위 사이트에서 Noje.js를 다운받아 설치하고, 독립 실행형 바이너리를 다운받아서 원하는 특정 폴더에 넣는다.

개인적으로 독립실행형 바이너리가 아닌 npm도 설치를 했었다. flutterfire configure 명령어가 firebase cli에서 오류가 발생해서 디버깅 과정에서 설치를 했었는데, 안해도 상관없었을듯 하다.

firebase cli 프로그램을 다운로드 한 곳에 환경변수를 잡는다.

나중에 flutterfire_cli를 activate하는 단계에서 C:\Users\[사용자이름]\AppData\Local\Pub\Cache\bin

환경변수를 추가하라고 하기 때문에 지금 한번에 추가한다.

Firebase 프로젝트 생성

Firebase 프로젝트 생성은 후술할 CLI에서도 할 수 있지만, 사이트에서 하는게 더 쉬운듯 하다.

아래 사이트로 이동 후 가입하고 프로젝트를 생성한다.

절차는 간단하다. 프로젝트 이름을 입력하고 필요하다면 애널리틱스를 연동하고 끝이다.

https://console.firebase.google.com/

Flutterfire cli 활성화

자동적으로 파이어베이스 콘솔로 이동되면 플러터 아이콘을 클릭한다.

플러터 앱에 금방 만든 파이어베이스 프로젝트를 연동한다.

첫단계의 Firebase CLI설치는 이미 완료했으며 로그인은 이어서 진행할 예정이다.

Flutter SDK와 Flutter 프로젝트는 기존에 작업해둔 Flutter 프로젝트가 있다는 가정하에 진행한다. 없다면 SDK를 다운받고 Flutter로 프로젝트를 하나 만들어야 한다.

첫단계는 이미 완료했으므로 다음을 선택한다.

두번째 단계는 다운받은 firebase cli를 이용하기 때문에 cli를 실행한다.

이후 cli에서 로그인을 진행하고 플러터 프로젝트로 이동 후 flutterfire_cli를 activate한다.

두번째 단계에 flutterfire configure단계가 있지만, 이는 cli에서 수행하면 오류가 발생했다. 따라서 후에 안드로이드 스튜디오의 터미널에서 수행하기위해 일단은 스킵한다.

$ firebase login // 로그인단계
$ cd [프로젝트 폴더] // 플러터 프로젝트 폴더로 이동(꼭 해야하는건지 모르겠음)
$ dart pub global activate flutterfire_cli

Flutter 프로젝트에 firebase_core 라이브러리 설치

안드로이드 스튜디오를 실행하고 하단의 터미널에서 아래 명령어를 입력하여 firebase_core를 설치하고 Pub get도 잊지않고 해준다.

$ flutter pub add firebase_core

플러터와 파이어베이스 연동

안드로이드 스튜디오 터미널에 파이어베이스 콘솔에 나왔던 flutterfire configure~~~~를 입력한다.

그럼 안드로이드, ios, 윈도우, 리눅스 중 어떤 프로젝트를 선택할것인지 나온다. 키보드의 up, down 버튼으로 해당 플랫폼으로 이동하고 스페이스로 체크를 선택/해제할 수 있다. 원하는 플랫폼을 선택한다. 이후 엔터를 선택하면 설치를 진행한다.

그리고 lib폴더에 firebase_options.dart있는지 확인한다.

또한 결과 창에 build.gradle과 관련된 내용들이 있는지 확인한다. 만약 없다면 파이어베이스 수행시 로그에 FirebaseApp initialization unsuccessful 오류가 발생할 수 있다.

오류가 발생한다면 후술할 build.gradle 작업 내용을 참고한다.

파이어베이스 init 코드 입력

파이어베이스의 콘솔창 3단계는 코드에 관한 내용이다. 아래 내용을 코드에 입력하면 되지만 아래 내용만으로는 실행이 되지 않는다. 

따라서 추가로 아래 라인도 입력한다. main은 async여야 한다.

WidgetsFlutterBinding.ensureInitialized();
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() async  {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

결과 확인

해당 프로젝트를 수행하면 아래와 같이 FirebaseApp initialization successful이 logcat에 출력된다.

해당 로그가 출력된다고 100% 작동한다는것은 아니지만 해당로그가 FirebaseApp initialization unsuccessful로 뜨면 그건 오류다. FirebaseApp initialization unsuccessful라고 뜨면 gradle 세팅을 참고한다.

gradle 세팅

프로젝트의 트리를 우클릭하고 Flutter > Open Android module in Android Studio를 선택하여 안드로이드 모듈로 새 창을 연다.

엡 수준 build.gradle에 아래 내용을 추가한다.

apply plugin: 'com.google.gms.google-services'

프로젝트 수준의 build.gradle에 아래 내용을 추가한다.

classpath 'com.google.gms:google-services:4.3.15'

Sync Now버튼으로 갱신한다.

만약 Open Android module in Android Studio로 열지 않을 경우 아래 명령어로 sync한다.

$ cd <프로젝트경로>/android
$ ./gradlew --refresh-dependencies

여전히 unsuccessful이 출력될 경우 flutter clean 명령어를 터미널에 입력 후 재빌드한다.

Leave a Comment