사용하지않는공간/Flutter

[Flutter] Node.js를 통한 Flutter 3.0 + Firebase 연동하기

반나무 2022. 8. 6. 17:32

안녕하세요, 반나무입니다.

Flutter 3.0으로 넘어가면서 Firebase에서 직접 연동이 가능하게 변경되었다고해서 시도해봤습니다.

 

코딩쉐프님의 유튜브와 Firebase Documentation을 참조했습니다.

 

Firebase CLI 참조  |  Firebase Documentation

FirebaseVisionOnDeviceAutoMLImageLabelerOptions

firebase.google.com

 

지금부터 Flutter 3.0과 Firebase CLI연동을 시작하겠습니다.

 

1. Firebase CLI 설치

우선 Firebase CLI를 설치합니다.

독립 실행형 바이너리와 npm 두가지 방식이 있어 Node.js를 설치하기 귀찮았던 저는 우선 독립 실행형 바이너리로 설치해봤습니다.

그러나 아래와 같은 에러를 만나게됩니다.

firebase command exception: an error occurred on the firebase cli when attempting to run a command.
 

FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command

Flutterfire just added a CLI for us to use but I'm having a problem with the flutterfire configure command. I keep getting this error: i Found 0 Firebase projects. Selecting project liveasy-1.

stackoverflow.com

 

한 시간 정도 조치방법을 따라해보다 포기하고 Node.js를 설치했습니다.

Node.js설치 후 cmd창에서 아래와 같은 코드를 입력해 Firebase CLI를 설치합니다.

npm install -g firebase-tools

 

2. Firebase Login 및 프로젝트 확인

설치가 완료되었다면, firebase에 로그인 해줍니다.

firebase login

그 다음 firebase 프로젝트를 확인해 올바르게 설치되었고 연결이 되었는지 확인합니다.

firebase projects:list

 

3. Flutter 프로젝트에서 Firebase 설치

현재 flutter 프로젝트에 firebase_core를 설치해줍니다.

cmd로 현재 프로젝트 폴더에 접근해도 괜찮고 IDE의 터미널로 접근해도 괜찮습니다.

flutter pub add firebase_core

 

4. Flutter 프로젝트와 Firebase 연동

현재 flutter 프로젝트에 firebase를 연동해줍니다.

cmd로 현재 프로젝트 폴더에 접근해도 괜찮고 IDE의 터미널로 접근해도 괜찮습니다.

Flutter와 Firebase를 연동하는 모습
연동 후 lib 폴더

 

5. Firebase 초기화

연동 후에 아래 와 같이 Firebase를 초기화 합니다.

main.dart

 


도움이되셨다면 공감 부탁드립니다!

반응형