[Flutter Web] Firebase 연동하기 (feat. Flutterfire Cli)

Flutter Web 에서 Firebase web 을 사용하는 가장 기본적인 동작을 준비해 보겠습니다.

Flutterfire를 보면 Manual구성도 가능하다고 하지만 제가 직접 매뉴얼로 구성하려고 했으나,

Firebase Iniailize부터 알 수 없는 에러가 발생하네요.

이제는 Flutterfire를 본격적으로 지원하고 가급적 Flutterfire Cli 사용을 권장하는 것으로 보입니다.

 

1. firebase tool 설치

 

 

 

터미널 창에서 위 명령어를 입력한다.

-g 옵션은 전역으로 설치하는 옵션으로 한번만 설치하면 다른 모든 경로에서 사용이 가능하다.

hosting, cloud functions 사용시에 필수 설치 요소이므로 설치가 안되었다면 이번 기회에 설치하는 것이 좋다

 

2. flutterfire cli 설치

 

 

 

프로젝트 단위 폴더에 firebase cli 를 설치한다.

 

3. flutterfire configure 실행

 

 

 

이제 본격적으로 flutterfire를 통해 firebase 설정을 시작한다.

위 명령어를 치면 프로젝트 선택(기존에 등록되어 있는 플랫폼을 선택해준다) > 플랫폼 선택(android, ios, web 중 필요한 플랫폼 선택) 순으로 진행이 되고, 완료가 되면 firebase_options.dart 파일이 생성이 된다

 

lib 폴더내에 firebase_options.dart 파일 생성

 

4. 이제 firebase_core 파일을 추가한다.

firebase_core는 모든 firebase의 서비스를 사용하기 위한 가장 기본 패키지로, 필수 설치 패키지이다.

flutterfire를 통해 세팅을 했으므로, 일정 버전을 명시하는 것이 아닌 add 명령어로 설치가 가능하다.

 

$ flutter pub add firebase_core

 

pubspec.yaml 파일을 열어보면 firebase core가 설치된 것을 볼 수 있다.

 

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  get: ^4.6.5
  percent_indicator: ^3.4.0
  intl: ^0.17.0
  flutter_svg: ^0.23.0+1
  eva_icons_flutter: ^3.0.2
  sidebarx: ^0.10.0
  firebase_core: ^1.20.1

 

이제 설치에 문제가 없는지 firebase initialize를 해보겠다.

 

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const MyApp());
}

 

main 함수에 위와 같이 Firebase.initializeApp 을 실행해준다.

현재까지 설정에 문제가 있다면 initialize에서 채널에러 등등 다양한 에러로 실행이 되지 않는다.

에러 메세지는 여러가지 케이스가 있지만 결국 원인은 flutter 프로젝트와 firebase core 설치가 되지 않았을 가능성이 가장 크다.

 

그럼 다음에는 firebase의 다양한 기능들을 web 프로젝트에 적용을 해보겠다.