플러터 앱에 Firebase 연동하기

 

 

새 프로젝트를 만들려고 하니 이것저것 환경 설정하는 부분이 전혀 기억이 안 나요. 하하...

블로그에 적어두는 습관을 갖도록 해야겠습니다. 😂😂😂

 

 

 

1. Vscode에 플러터 프로젝트 새로 만들기

Vscode에 플러터와 다트 플러그인을 설정하는 것은 생략하도록 하겠습니다.

맥 OS 기준 Command + Shift + P 를 누르면 팔레트 창이 보이는데 Flutter: New Project를 선택합니다.

 

그리고 아래 사진에서 Application을 선택하고 원하는 폴더를 지정

 

test폴더를 생성하고, Select a folder to create the project in 버튼을 클릭

 

 

간단하게 플러터 프로젝트 생성 완료했습니다.

 

그렇지만 이전에 organization을 설정해두지 않았으면 패키지명이 com.example.프로젝트명으로 되어있을 것인데요.

저는 기존에 설정해 놓은 것이 있었기 때문에 com.zzingonglog.프로젝트명으로 설정되어 있어요.

이 부분의 설정방법은 command  + , 를 입력하거나, [Code]->[Preferences]->[Setting] 메뉴에 진입하면 아래와 화면이 나타납니다.

입력창에 flutter create organization을 입력 -> Edit in settings.json 클릭

 

18번 줄을 com.회사 or 조직이름으로 수정합니다.

아래의 화면처럼 원하는 아무 이름을 적으면 추후 생성되는 프로젝트의 도메인은 com.zzingonglog.프로젝트명으로 자동 설정됩니다. 

 

 

 

2. 플러터 프로젝트에 파이어베이스(Firebase) 프로젝트 연동하기

이제 막 새로 만든 플러터 프로젝트에 파이어베이스를 연동하도록 해보겠습니다.

터미널 작업만으로 쉽게 파이어베이스 프로젝트를 연동할 수 있어요.

아래 공식문서를 그대로 따라 해보면서 정리해 보았습니다.

공식문서참조 : https://firebase.google.com/docs/flutter/setup?hl=ko

Flutter 앱에 Firebase 추가

 

 

1단계. 필수 명령줄 도구 설치

1) 파이어베이스 로그인

firebase login

 

 

이미 저는 로그인이 되어있다고 하는데요. 구글 계정으로 로그인을 진행해 주시면 됩니다.

 

 

2) FlutterFire CLI 설치

dart pub global activate flutterfire_cli

 

firebase 명령줄을 사용하려면 CLI를 설치해주어야 합니다. 저는 이미 설치가 되어있는것으로 나오네요.

 

 

 

2단계. Firebase를 사용하도록 앱구성

1) 플러터 앱 구성하기

flutterfire configure

 

위 명령어를 실행하면 아래와 같은 화면이 뜨는데 저 같은 경우는 기존(망한) 2개의 프로젝트가 보이네요.🤣

새로운 프로젝트를 만들어야 하기 때문에 <create a new project>를 방향키로 선택해 줍니다.

 

타이머 앱을 만들고 있기 때문에 예시를 똑같이 그냥 my-pomo-timer로 입력했어요.🤣

그리고 지원할 플랫폼은 안드로이드와 ios만 올려볼 것이지만 나중에 혹시 할지도 모르니 그냥 전부 선택하고 엔터.

 

기다리다 보면 아래와 같이 잘 등록되었다고 뜹니다.

 

 

 

3단계. 앱에서 fireabse 초기화

이제 플러터 프로젝트에 파이어베이스 관련 플러그인을 설치해주어야 합니다.

가장 기본이 되는 코어플러그인을 추가해봅니다.

flutter pub add firebase_core

 

그러면 알아서 pubspec.yaml 파일 안에 최신버전으로 등록이 됩니다.

flutter pub add PLUGIN_NAME

 

앞으로  플러터 프로젝트에 플러그인을 설치할 때는 위와 같이 명령어를 사용하면 편리하게 최신버전으로 등록할 수 있어요.

 

pubspec.yaml

 

 

그리고 플러터 프로젝트가 새로 생성되면 자동으로 만들어지는 main.dart의 상단과 메인함수에 파이어베이스 초기화 코드를 작성합니다.

 

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

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

 

 

빌드를 해서 오류 없이 정상적으로 나오면 firebase 기본 세팅은 성공입니다.