2023. 3. 13. 14:11ㆍ모바일어플개발/Flutter
안녕하세요~ totally 개발자입니다.
Firebase & Flutter 연동
오늘은 플러터와 파이어베이스를 서로 연동하는 방법에 대해 살펴보도록 하겠습니다.
Step 1: 파이어베이스 웹사이트에 접속하셔서 구글 아이디로 로그인 하신 뒤, 콘솔로 이동해줍니다.
Step 2: 기존에 프로젝트 만드신 것이 있다면 그 프로젝트로 가시면 되고, 새로 만들어야 한다면 프로젝트 추가 버튼 눌러주시면 됩니다.
저는 기존에 JavaScript 용도로 파이어베이스 프로젝트를 생성한 적이 있어서 새로 프로젝트 만들지 않고 여기에서 앱 추가 버튼을 눌러주면 다음 스크린샷처럼 Flutter를 선택할 수 있습니다.
먼저 firebase CLI를 https://firebase.google.com/docs/cli?authuser=0&hl=ko#install_the_firebase_cli 참고하여 설치해줍니다. 그 다음 firebase login를 커맨드(프로젝트 루트 디렉토리)에 입력하셔서 아이디(파이어베이스에 로그인한 계정), 비밀번호 입력하시면 로그인 성공적으로 될 것입니다. (플러터 프로젝트와 플러터 SDK는 이미 만들어져 있다고 가정합니다)
그 후 다음에 나와 있는 커맨드들을 차례로 복사해서 넣어줍니다. 이 부분에서 에러가 발생할 수 있을텐데 이 부분은 사용자의 구축 환경에 따라 에러 해결 방법이 다양할 수 있기 때문에 여기에 덧글 달아주시거나 구글링을 통해 해결해주셔야 합니다. 저의 경우에는 맥 OS이고 .zshrc 파일을 수정해서 에러를 해결했습니다.
Step 3: flutterfire 커맨드 부분이 성공적으로 입력되어 실행되면 아래처럼 Which platforms should your configuration support라는 질문이 나오는데 저는 android로 선택했습니다.
이 위에 나오는 ID들은 참고를 위해 스크린샷이나 메모해두시기 바랍니다.
Step 4: 3번째 단계인 Firebase 초기화 및 플러그인 추가 부분에서 다음처럼 그대로 따라서 입력해줍니다.
아래 보시면 firebase_options.dart 파일이 생성되었을 것인데, 오류가 있다고 3번째 줄에 나옵니다. 그 이유는 아직 플러그인을 추가해주지 않았기 때문입니다.
pubspec.yaml 파일에 들어가셔서 38번째처럼 firebase_core: 입력해주시고 Ctrl + S 또는 Command + S 하시거나 터미널에 flutter pub get 해주시면 됩니다.
그 후에 다시 열어보았을 때, 오류가 없어진 것을 확인하실 수 있습니다.
여기까지 성공적으로 하셨으면 연동은 마무리된 것입니다.
'모바일어플개발 > Flutter' 카테고리의 다른 글
[042] 플러터 (Flutter) 배우기 - Firebase Auth 연동2 (휴대폰 문자 인증) (7) | 2023.03.17 |
---|---|
[041] 플러터 (Flutter) 배우기 - Firebase Auth 연동1 (이메일/비밀번호 사용) (0) | 2023.03.13 |
[039] 플러터 (Flutter) 배우기 - Form, validator, TextFormField, Navigator 매개변수 전달하기 (0) | 2023.03.11 |
[038] 플러터 (Flutter) 배우기 - WebView (웹뷰) 구현하기 (0) | 2023.03.04 |
[037] 플러터 (Flutter) 배우기 - 푸시 알림 보내기(local notification) (4) | 2023.02.21 |