Flutter 프로젝트에 Firebase 연결

Flutter 프로젝트에 Firebase를 연결하는 방법에 대해 알아보겠습니다. 이 포스팅은 Firebase를 Flutter 앱에 통합하는 기본 단계를 안내합니다.

1. Firebase 프로젝트 생성

1. Firebase 콘솔로 이동하여 새로운 프로젝트를 생성합니다.
2. 프로젝트 이름을 입력하고 필요한 설정을 완료합니다.

2. Firebase 설정 파일 다운로드

Android

1. Firebase 콘솔에서 프로젝트 설정으로 이동합니다.
2. Android 앱을 추가하고 패키지 이름을 입력합니다.
3. google-services.json 파일을 다운로드하여 android/app 디렉토리에 복사합니다.

iOS

1. Firebase 콘솔에서 프로젝트 설정으로 이동합니다.
2. iOS 앱을 추가하고 iOS 번들 ID를 입력합니다.
3. GoogleService-Info.plist 파일을 다운로드하여 ios/Runner 디렉토리에 복사합니다.

3. Firebase CLI 초기화

터미널을 열고 Firebase CLI를 설치합니다.

npm install -g firebase-tools

Firebase에 로그인합니다.

firebase login

Firebase 프로젝트를 초기화합니다.

firebase init

4. Flutter 프로젝트에 Firebase 패키지 추가

pubspec.yaml 파일을 열고 Firebase 관련 패키지를 추가합니다.

최신 버전 번호는 pub.dev에서 확인할 수 있습니다.

패키지를 설치합니다.

flutter pub get

5. Flutter 프로젝트 설정

Android

android/build.gradle 파일을 열고 다음을 추가합니다.

android/app/build.gradle 파일을 열고 다음을 추가합니다.

iOS

ios/Podfile 파일을 열고 다음을 추가합니다.

platform :ios, '10.0'

# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'

project 'Runner', {
  'Debug' => :debug,
  'Profile' => :release,
  'Release' => :release,
}

install! 'cocoapods', :generate_multiple_pod_projects => true

def parse_KV_file(file, separator='=')
  file_abs_path = File.expand_path(file)
  if !File.exists? file_abs_path
    return [];
  end
  gen = open(file_abs_path).read
  return gen.split("\n").map{|line| line.strip.split(separator)}.map{|pair| [pair[0], pair[1]]}.to_h
end

target 'Runner' do
  use_frameworks!
  use_modular_headers!

  # Flutter Pod
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
  
  # Firebase Pods
  pod 'Firebase/Core'
  pod 'Firebase/Auth'
  pod 'Firebase/Firestore'

end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
    end
  end
end

6. Flutter 코드에서 Firebase 초기화

lib/main.dart 파일에서 Firebase를 초기화합니다.

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Firebase Home'),
      ),
      body: Center(
        child: Text('Hello, Firebase!'),
      ),
    );
  }
}

7. 앱 실행

모든 설정이 완료되면 Flutter 앱을 실행합니다.

flutter run

이제 Firebase가 Flutter 프로젝트에 연결되고 Firebase 서비스를 사용할 수 있습니다.

마무리

필자는 킹 갓 IntelliJ IDEA를 사용하여 Flutter를 설치하고 구동했습니다. IntelliJ IDEA를 사용하면 좀 더 편하게 설치하고 관리할 수 있으니 참고하시기 바랍니다.

이 글이 도움이 되었기를 바랍니다. Firebase와 Flutter를 통합하는 과정에서 발생할 수 있는 문제나 질문이 있다면 언제든지 댓글로 알려주세요!