close
프로필 배경
프로필 로고

고은별의 기술 공유 연구소

Mobile/Flutter · 2024. 1. 10. fullscreen 넓게보기

Flutter - 플러터 앱에 파이어베이스 연동하기 (FlutterFire)

플러터파이어(FlutterFire) 란?

  • Flutter의 응용 프로그램을 Firebase에 연결하는 Flutter 플러그인 세트이다.
  • Flutter에서 Firebase 서비스를 사용하려면 FlutterFire 플러그인이 필요하다.

이 포스팅은 파이어베이스 CLI를 필요로 한다.
또한 포스팅에서는 윈도우 환경에서 npm으로 Firebase CLI를 설치한 후 진행하였다.

플러터파이어 CLI를 설치하려면 반드시 파이어베이스 CLI가 설치되어 있어야 한다.
만약 설치 되어 있지 않다면 아래의 포스팅을 확인하여 먼저 기본 환경을 구성하자.

 

Firebase - 처음 시작하기, 프로젝트 생성하기, Firebase CLI 설치하기

파이어베이스(Firebase) 란? iOS, Android, 웹, Flutter, Unity, C++용 앱을 빌드하고 출시하는 앱 개발 크로스 플랫폼이다. 앱 개발의 모든 단계를 지원하는 제품 및 솔루션 제공하여 보다 쉽게 앱 개발을 할

luvris2.tistory.com

 

포스팅에서 설명하는 프로젝트는 깃허브에서 다운 받을 수 있다.

FlutterFire 설정

FlutterFire CLI 환경 변수 등록

플러터 앱에서 파이어베이스에 연결하도록 구성하려면 FlutterFire CLI가 필요하다.
터미널에서 아래의 명령어를 입력한다.

dart pub global activate flutterfire_cli

 
그럼 환경 변수를 등록하지 않았다는 경고 문구가 뜰 것이다.
경고 문구에 뜬 경로를 복사하여 환경 변수 등록해주자.

<터미널에서 플러터파이어 CLI 활성화 시 환경 변수를 등록하라고 뜬 경구 문구 화면>

 
아래는 윈도우 환경을 기준으로 환경 변수를 등록하는 방법이다.

  • 윈도우 키 - '시스템 환경 변수 편집' 입력 - 실행
  • (시스템 속성 창에서) 고급 탭 - 환경 변수
  • (환경 변수 창에서) 사용자 변수 - 새로 만들기
    • 포스팅에서는 임의로 FLUTTERFIRE_HOME 이라는 이름으로 추가하였다.
# 윈도우 기준
C:\Users\사용자명\AppData\Local\Pub\Cache\bin

<환경 변수에서 flutterfire cli 환경 변수를 등록하는 화면>
<환경 변수에서 flutterfire cli 환경 변수가 추가된 화면>

 
이제 등록한 사용자 환경 변수를 통해 path에 경로를 지정해보자.

  • 사용자 변수 - Path - 새로 만들기 (%FLUTTERFIRE_HOME%)
  • 사용자 변수의 이름은 각자 개인이 원하는 이름으로 지정한다.
  • 포스팅에서는 'FLUTTERFIRE_HOME'으로 지정하였다.

<사용자 환경 변수의 path에서 flutterfire cli 환경 변수의 경로를 설정하는 화면>

 
사용중인 IDE툴을 종료했다가 다시 실행한다. (포스팅에서는 VS Code를 사용한다.)
터미널을 실행하여 flutterfire_cli 설정 재적용을 위해 비활성화 후 다시 활성화 해준다.

# 차례로 입력
dart pub global deactivate flutterfire_cli

dart pub global activate flutterfire_cli

 
그럼 정상적으로 'flutterfire cli' 패키지 정상적으로 설치될 것이다.
만약 환경 변수 경로를 설정하라는 경고 문구가 계속 출력된다면..
위의 과정을 다시 한 번 확인해보거나, 터미널을 재실행 해보거나, 컴퓨터를 재부팅 한 후 재시도해보자.

플러터 앱과 파이어베이스 프로젝트 연동

파이어베이스와 플러터 프로젝트를 연결해야한다.
아래의 명령어를 통해 파이어베이스 프로젝트를 선택하고 플러터 프로젝트와 연동하자.
방향키 위 아래 키로 다른 프로젝트를 선택할 수 있으며, 엔터 키로 선택할 수 있다.

flutterfire configure

 
혹시 flutterfire configure 명령어가 정상적으로 실행되지 않고 아래와 같은 문구가 출력된다면,
플러터 프로젝트 디렉토리로 이동해서 명령어를 실행해보자.
아래의 오류 문구는 플러터 프로젝트가 아니기 때문에 출력되는 문구이다.

flutterapprequiredexception:
the current directory does not appear to be a flutter application project.

 
flutterfire configure 명령어가 정상적으로 실행되었으면 이제 프로젝트 연동 설정을 진행해보자.
1. 연동할 파이어베이스 프로젝트 선택

<터미널에서 flutterfire configure로 파이어베이스 프로젝트와 연동하는 화면>

 
2. 지원 플랫폼 설정
엔터 키를 누르면 프로젝트 디렉토리의 lib 폴더에 firebase_options.dart 파일이 생성된다.
해당 파일에서 각 플랫폼별 정보를 확인할 수 있다.

<터미널에서 flutterfire configure로 파이어베이스 지원 플랫폼 설정을 생성하는 화면>

파이어베이스 필수 플러그인 설치

터미널에서 pub 명령어를 이용하여 파이어베이스 필수 플러그인인 firebase_core 를 설치한다.

flutter pub add firebase_core

플러터 앱 내 파이어베이스 초기화 및 플러터파이어 사용준비

main 파일에 파이어베이스 패키지와 설정한 파이어베이스 정보가 담겨 있는 옵션 파일을 호출한다.

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

 
메인 함수에 애플리케이션이 실행되기 전에 파이어베이스 초기화가 완료되는 코드를 넣어준다.

  • DefaultFirebaseOptions.currentPlatform
    • firebase_options.dart 파일에서 설정한 정보를 가져온다.
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

참고

  • 파이어베이스 공식 문서 - Firebase CLI 참조
  • 파이어베이스 공식 문서 - Flutter 앱에 Firebase 추가
  • 플러터파이어 공식 문서 - FlutterFire Overview
Mobile/Flutter 관련 글
더 보기

티스토리툴바