Curious Traveler

Flutter에 Firebase를 연결하는 법

sy34 -

Flutter와 Firebase는 함께 자주 쓰는 일이 잦은데, 연결은 처음에 한번만 하면 그 다음부터 신경을 안써도 되다보니 기억을 잘 못하고, 매번 새로운 프로잭트를 실행 할 때마다 방법을 찾아보았다. 매번 찾기 귀찮아서 이번 포스팅에 정리를 해보았다.

iOS, Android, Web 3가지 모두를 연결하는 법에 대해 알아본다.

# iOS

우선 패키지명을 정하는 것부터 시작을 해야한다. VSCode에서 iOS 폴더를 오른쪽 클릭하면 "Open in Xcode" 옵션이 나온다. 그걸 클릭해서 Xcode를 실행.

Runner -> Signing & Capabilities -> Bundle Identifier에 패키지명을 수정해주면 된다.

Firebase에서 iOS 추가 버튼 눌러주고 첫번째 스탭에서 패키지명을 입력하고 "Register App"을 클릭.

GoogleService-Info.plist를 다운로드 하고, 다운로드 한 파일을 Xcode의 Runner폴더 아래에 드레그앤드롭으로 추가.

설정 화면이 나오면 위와 같이 해주고 Finish.

Runner 폴더 아래에 GoogleService-Info 파일이 보이면 성공한 것이다.

Firebase에서 다른 스탭들은 Flutter에서는 불필요하기 때문에 그냥 Next를 눌러서 끝내주면 된다.

그 다음 터미널에서 firebase_core 패키지를 설치.

flutter pub add firebase_core

그 외에 본인이 필요한 firebase 패키지들도 같이 설치해준다. 일반적으로 자주 쓰이는 것들은 다음과 같다.

  • flutter pub add firebase_auth -> 인증
  • flutter pub add cloud_firestore -> 데이터베이스
  • flutter pub add firebase_storage -> 스토리지

설치가 완료되면 ios 폴더안에 있는 Podfile을 열고 맨 위에 코맨트아웃 되어있는 # platform: ios, '11.0' 이부분의 맨 앞 #를 삭제해서 저장.

터미널에서 ios 폴더로 이동하여 다음 커맨드 실행.

pod install

에러없이 진행되면 이걸로 ios는 준비 끝.

# Android

우선 android -> app 폴더 안에 있는 build.gradle 파일을 열면 29번째줄과 48번째줄쯤에 패키지명을 설정 할 수 있는 줄이 있다. 자기가 원하는 패키지명으로 변경해주자.

그리고 그 밑에 줄에 있는 minSdkVersion을 19로 해주고 그 밑에 다음 줄을 추가해주자.

minSdkVersion 19 // 19로 수정
targetSdkVersion flutter.targetSdkVersion
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
multiDexEnabled true // 추가하는 라인

다음으로 android -> app -> src -> main -> kotlin -> MainActivity.kt 를 열고 맨 윗줄에 package명을 자기가 원하는 패키지명으로 똑같이 변경해야한다. 여기를 변경하지 않으면 나중에 android 시뮬레이터로 실행할 때 에러가 난다.

ios때와 마찬가지로 Firebase에서 Android 앱을 추가하기 한다음 패키지명을 넣고 Register app.

다음 단계에서 google-services.json 파일을 다운 받고 android -> app 폴더 안에 추가.

다음 단계에서 초록색으로 적힌 줄을 android -> build.gradle 파일에 추가.

dependencies {
        classpath 'com.android.tools.build:gradle:7.3.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.3.15'
    }

이런식으로 된다.

그 다음 이번엔 android -> app -> build.gradle 파일을 열고 27번째줄 쯤에 apply plugin: 'com.google.gms.google-services'를 추가해준다.

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.google.gms.google-services'

이런식으로 된다.

이걸로 android를 위한 설정도 끝.

# Web App

ios & android와 마찬가지로 web app도 먼저 Firebase에 등록을 해줘야한다. 앱 이름을 지정하고 Register App을 하면 sdk 사용을 위해 필요한 정보들이 나온다.

firebaseConfig에 있는 정보를 일단 잘 적어두자.

# 작동 테스트

main.dart 파일을 열고 다음 패키지들을 먼저 import.

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/foundation.dart';

그 후 void main() 부분에 다음과 같이 추가해준다.

void main() async { // async로 변경
  // Flutter가 먼저 실행되는걸 확인
  WidgetsFlutterBinding.ensureInitialized();
  
  // Web App일 경우 추가로 필요한 옵션 값들을 설정
  if (kIsWeb) {
    await Firebase.initializeApp(
      options: const FirebaseOptions(
        apiKey: <apiKey>,
        appId: <appId>,
        messagingSenderId: <messagingSenderId>,
        projectId: <projectId>,
        // storageBucket: <storageBucket>  Firebase Storage를 사용하는 경우 추가
      ),
    );
  } else { // iOS와 Android때는 그냥 Firebase SDK를 실행하면 됨.
    await Firebase.initializeApp();
  }
  runApp(const MyApp());
}

각각 iOS와 Android 시뮬레이터를 실행시켰을 때 에러가 안나면 성공.
Web App은 다음 커맨드로 실행 해 볼 수 있다.

flutter run -d chrome

어차피 Firebase를 사용할거라면 새로운 프로잭트를 만들자마자 다른 걸 하기 전에 바로 Firebase에 대한 설정도 같이 해두면 편하다. 어차피 패키지명도 나중에 반드시 바꾸어줘야 하기 때문에 시작 할 때 미리 다 해두면 그만큼 개발에만 집중 할 수 있게 된다.