flutter) Firebase 연동하기 <Mac>

 

flutter에서 firebase를 공식지원한 뒤로 firebase 연동이 아주 쉬워졌습니다.

그럼에도 처음 접하는 개발자에게는 험난한 길이기에 구글링을 하다가 결국 이전방식대로 연동을 하기도 하는데요,

이 포스팅을 통해 flutter - firebase 연동에 도움이 되었으면 좋겠습니다.

 

*Flutter 프로젝트 생성은 본 포스팅에서 다루지 않습니다.

 

1. Firebase 프로젝트 생성

google Firebase Console사이트에서 firebase 프로젝트를 생성합니다.

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

 

프로젝트 추가 순서를 따라 진행합니다.

 

 

프로젝트가 생성되면 자동으로 해당 프로젝트 화면이 열릴텐데, 가장 우측의 Flutter아이콘을 눌러서 flutter프로젝트와 연동을 시작합니다.

 

위의 순서를 따라 진행하면되는데, 하나씩 진행해보도록 하겠습니다.

 

2. flutter - firebase 연동

a. Firebase CLI 설치

- 터미널에서 아래 명령어를 입력합니다

curl -sL https://firebase.tools | bash

이후 아래 명령어를 입력하여 파이어베이스에 로그인합니다.

firebase login

오류정보를 보낼거냐 물어보는데 y/n 둘 다 상관없으니 y 또는 n을 누르면 구글로그인 창이 열립니다.

프로젝트를 생성한 구글계정으로 로그인합니다.

 

아래 명령어로 내가 로그인 한 계정의 프로젝트를 확인할 수 있습니다.

firebase projects:list

내가 생성한 프로젝트가 출력되면 정상적으로 로그인 된것입니다.

 

 

 

b. Flutter SDK설치

- flutter프로젝트를 생성하면서 설치되었을것이라 생각하고 넘어가겠습니다.

(Flutter SDK 설치 주소: https://docs.flutter.dev/get-started/install?authuser=0&hl=ko)

 

 

3. FlutterFire CLI 설치

 

터미널에서 아래 명령어를 입력하여 firebase CLI를 설치합니다

dart pub global activate flutterfire_cli

 

설치가 완료되면 프로젝트의 터미널에서 아래 명령어를 입력합니다.

(프로젝트 폴더는 cd ..../프로젝트 의 명령어 혹은 vsc등의 터미널을 열면 자동으로 프로젝트 터미널이 열립니다.)

flutterfire configure --project=[프로젝트 이름]

여기서 에러가 날 경우 [프로젝트 이름]에 firebase-console창에서 내가 만든 프로젝트이름 바로 밑의 회색글씨를 뒤의 문자까지 그대로 입력합니다.(ex. temp01-f8f9a)

 

 

 

위와같이 어떤 플랫폼을 이용할 것인지 나오면 지원할 플랫폼을 선택(space)하고 enter를 눌러 진행합니다.

space를 다시 누르면 체크를 해제할 수 있습니다.

 

yes 그대로 엔터를 쳐서 진행합니다

정상적으로 설치가 됐다면 프로젝트 lib폴더에 firebase_options.dart파일이 자동으로 생성됩니다.

 

 

4. firebase 적용 확인

firebase 초기화를 위해 필수 플러그인을 설치합니다.

터미널을 통해 간단하게 추가할 수 있습니다.

flutter pub add firebase_core

 

위 명령어를 입력하면 프로젝트폴더의 pubspec.yaml파일에 firebase_core가 자동으로 추가됩니다.

 

이후 터미널에 아래 명령어를 입력합니다.

(flutter - firebase의 구성을 확인하기 위함.)

flutterfire configure

 

내가 생성한 firebase의 프로젝트를 선택합니다.

지원하고자하는 os를 선택합니다.

 

연결이 완료되면 main에 아래 코드를 입력합니다.

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

void main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MaterialApp(home: HomeScreen()));
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Text("test..."),
    ));
  }
}

 

디버깅이 정상적으로 실행되면 파이어베이스 연동에 성공!

 

 

++firebase의 플러그인을 사용하려면 터미널에 아래 명령을 입력한다.

flutter pub add [플러그인 이름]

플러그인은 firebase공식사이트에서 확인가능합니다.

(https://firebase.google.com/docs/flutter/setup?authuser=0&hl=ko&platform=web#available-plugins)

 

 

*발생할 수 있는 에러

https://bright-effact.tistory.com/entry/Flutter-POD-%EC%97%90%EB%9F%AC-Cocoapods-%EC%97%90%EB%9F%AC-firebase

Flutter) POD 에러 (Cocoapods 에러 / firebase)