Flutter와 Firebase 연동

아래 공식 문서와 코딩셰프 유튜브를 기반으로 내 flutter 프로젝트에 firebase 연동하는 방법을 설명

 

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

Flutter 앱에 Firebase 추가

https://youtu.be/J3OqrOJpPVQ

1. firebase CLI 설치

현재 firebase는 CLI를 통해 작업을 수행하는 것을 권장한다.

 

firebase CLI는 아래 사이트에서 다운로드 가능

https://firebase.google.com/docs/cli?hl=ko#windows-npm 

Firebase CLI 참조  |  Firebase 문서

독립 실행형 바이너리보단 node.js를 설치 후 npm을 통한 설치가 추후 사용에 더 용이하다.

설명에 따라 firebase CLI를 설치

 

설치 후 다음 명령어를 수행하여 login 수행

firebase login

2. firebase 프로젝트 생성

내 flutter 프로젝트와 연결할 firebase 프로젝트를 생성해준다.

아래 명령어로 수행하며, 이때 프로젝트 명은 전체 firebase 프로젝트와 공유되기 때문에 독창적으로 만들 필요가 있다.

(ex: firebase-project-123498767)

firebase projects:create {원하는 프로젝트 명}

3. flutterfire_cli 설치

윈도우 powershell에서 아래 명령어로 flutterfire_cli를 설

dart pub global activate flutterfire_cli

4. 내 flutter 프로젝트에 firebase 프로젝트 연동

내 flutter 프로젝트의 root path에서 powershell을 실행

그 후 아래 명령어를 실행해 설정 시작

D:\desktop\git\pineapple_tok> flutterfire configure

firebase 프로젝트 선택, 여기서 project를 생성할 수도 있다

flutter 프로젝트와 연동할 app 선택, space bar를 통해 원하는 것만 선택할 수 있다

configure 완료 후 로그

이후 flutter 프로젝트의 lib path 아래에 firebase_option.dart가 생성된 것을 확인할 수 있다.

5. flutter 프로젝트 내에서 firebase 초기화

아래 명령어로 firebase_core 플러그인을 설치

D:\desktop\git\pineapple_tok> flutter pub add firebase_core

그 후 다시 한 번 configure 실행

D:\desktop\git\pineapple_tok> flutterfire configure

그후 lib/main.dart 파일에 아래 코드 추가 및 main 함수 수정

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

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

이때 WidgetsFlutterBinding.ensureInitialized(); 를 추가해야 하는 이유는 아래 영상에서 확인 가능

https://youtu.be/se6wKk-w8lI?t=162 

 

모두 추가 후 빌드를 통해 정상성 확인