[Flutter] Firebase flutter 설정

Firebase를 사용하는 사람들은 굉장히 쉽고 빠르게 연결해서 사용할수 있다고 말하지만

개인적으로 강의나 책의도움없이 들어가기엔 진입장벽이 높다고 생각한다.

Flutter 3.0기반으로 Firebase 프로젝트를 만들고, 기존 Flutter project안에서 initialize 하기까지의 과정을 정리한다.

 

 

1. Firebase console 에서 프로젝트 생성

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

로그인 - Google 계정

먼저 구글 로그인후 Firebase web console에서 새 프로젝트를 만든다.

간단하게 새 프로젝트를 만들고나면,

본인이 개발중이던 Flutter Project에 연결할 수 있다.

해당 웹 프로젝트에서  Flutter 버튼을 누르면 아래와 같이 단계별로

Flutter Project에 연결하여 사용하는 방법을 친절하게 설명해주고있다.

 

하나씩 살펴보자

 

 

2. Flutter 프로젝트에 연결하기

 

1) 작업공간 준비

이미 기존 프로젝트가 개발중이였다고 가정하면

아래와 같이 Firebase cli 을 설치하여 프로비저닝을 쉽게 할 수 있다.

아래와 같이 가이드를 따라서 로그인 (firebase login) 부분까지만 진행한다

 

2) Cli 설치 및 실행

가이드를 따라서 진행하면

내 프로젝트에 웹에서 만들어준 firebase 설정 정보가 담긴 파일들이

프로젝트 내부에 파일로 저장되며 자동으로 프로비저닝되어 쉽게 사용할수있게 초기 설정을 해준다.

 

3) Firebase 사용가능(?)

이제부터는 프로젝트 내부에 위와같이 코드를 넣어

초기화해줄수 있다고 설명되어있지만,...

 

안드로이드라면 동작하지 않을것이다.  (추가적인 설정들이 더 필요하다)

 

 

3. AOS Gradle 설정

IOS는 특별한 설정없이 바로 진행되는것으로 알고있지만.

안드로이드라면, 추가적인 설정이 더 필요하다.

https://firebase.google.com/docs/android/setup?hl=ko&authuser=0#add-config-file 

Android 프로젝트에 Firebase 추가  |  Firebase Documentation

천천히 가이드를 따라

Gradle에 해당 내용을 추가해주면 된다.

 

아마 읽다보면 상당부분은 이미 추가되어있고 완료되어있을것이다.(google-services.json 도 이미 project안에 있음)

부분 부분 빠져있는 설정을 추가적으로 작성해주면 정상적인 동작이 될것이다.

 

 

4. 코드 작성

이제 정말 필요한 설정이 끝났다.

Firebase Api 라이브러리를 pub에서 설치하여 실행시켜보자

 

필자는 일단 아래의 firebase_core, firebase_auth 두가지를 다운받아서

연결 초기화와 auth 테스트를 진행해보겠다.

 

https://pub.dev/packages/firebase_core

firebase_core | Flutter Package

https://pub.dev/packages/firebase_auth

firebase_auth | Flutter Package

 

pub에 올려진 Example을 참조하여 코드를 작성하시기 바랍니다.

추가적으로 디버깅을 돕기위해 작성코드를 올리겠습니다.

 

예시 코드

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

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // firebase_options import 후 options 지정을 해줘야 init이 정상적으로 진행됨
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MainApp());
}

...
...

반환은 Future로 async , await를 통해 비동기, 대기처리를 작성해주셔야

정상적인 초기화 이후 사용이 가능해집니다.

Widget HomeRouting(){
  User? user = FirebaseAuth.instance.currentUser;
  if (user == null) {
    logger.i("Not loggind");
    return const Screen_Login();
  } else {
    logger.i("already loggind");
    return const Home();
  }
}

저는 위와 같이 HomeRouting 메소드를 추가해서 auth가 없는 경우

login페이지로 연결시켜주었는데 정상동작이 되었습니다.

 

 

 

 

+ 디버깅 로그

위에서부터 잘 따라왔는데도 에러가 발생할 수 있습니다.

디버깅을 검색하시기전에 아래와 같은 로그가 있는지 확인해보시기 바랍니다.

 

 

1. No Firebase App '[DEFAULT]' has been created....

initializeApp 메소드에 options를 설정해주어야 합니다.

import 'firebase_options.dart'; // 해당파일 import 중요

...
  await Firebase.initializeApp(
  	// 옵션 설정도 중요
    options: DefaultFirebaseOptions.currentPlatform,
  );
...

그렇지 않으면 아래와 같은 에러를 마주합니다. 

No Firebase App '[DEFAULT]' has been created

 

 

2. initializeApp null-error, Host platform returned null value....

만약 아래와 같은 에러를 만났다면,

[ 3. AOS Gradle 설정] 부분을 다시 한번 읽고 체크해보시기 바랍니다. 

E/flutter (25357): [ERROR:flutter/lib/ui/ui_dart_state.cc(198)] Unhandled Exception: PlatformException(null-error, Host platform returned null value for non-null return value., null, null)
E/flutter (25357): #0      FirebaseCoreHostApi.optionsFromResource (package:firebase_core_platform_interface/src/pigeon/messages.pigeon.dart:250)
package:firebase_core_platform_interface/…/pigeon/messages.pigeon.dart:1
E/flutter (25357): <asynchronous suspension>
E/flutter (25357): #1      MethodChannelFirebase.initializeApp (package:firebase_core_platform_interface/src/method_channel/method_channel_firebase.dart:89)
package:firebase_core_platform_interface/…/method_channel/method_channel_firebase.dart:1
E/flutter (25357): <asynchronous suspension>
E/flutter (25357): #2      Firebase.initializeApp (package:firebase_core/src/firebase.dart:40)
package:firebase_core/src/firebase.dart:1
E/flutter (25357): <asynchronous suspension>
E/flutter (25357): #3      main (package:notifappfcm/main.dart:13)
package:notifappfcm/main.dart:1

 

3. a globalkey was used multiple times inside one widget's child list...

간혹, 메서드가 64K개를 초과하여 멀티덱스 사용 설정이 필요한 경우가 있습니다.

아래 내용을 참고하여  멀티덱스 사용 설정을 해주시면 됩니다.

https://developer.android.com/studio/build/multidex#kts

메서드가 64K개를 초과하는 앱에 관해 멀티덱스 사용 설정  |  Android 개발자  |  Android Developers

 

 

많은 스트레스가 있었던 연결이였습니다만,

한번 겪고나니 정리도 되고, 두번 세번은 쉽게 셋팅해줄수 있을것 같네요!

 

이제 연결이 되었으니 무료로 Firebase에  다양한 기능들을 사용할 수 있습니다.

다음번엔 사용자 인증 관리 api인 auth와 쉽고 빠른 db인 firestore 사용에 대해서 더 작성해보겠습니다.