본문 바로가기
Flutter

플러터(Flutter) - Firebase에 올린 파일 보여주기

by codeflow 2022. 10. 18.

Firebase의 Cloud Storage에 올린 이미지나 동영상 파일을 앱을 통해 사용자에게 보여주려면 DB 서비스인 Firestore 서비스를 이용하면 됩니다. (Firebase에서는 JSON 형식의 실시간 데이터베이스도 지원하는데 나중에 살펴보겠습니다.)  Cloud Storage가 파일 서버라면 Cloud Firestore는 NoSQL형 DB 서버로 Storage에 올린 파일의 URL 주소나 메타데이터 등 텍스트 정보를 ID가 있는 DB 형식으로 저장할 수 있습니다.

Firebase 콘솔에서 Cloud Firestore 생성하기

Firebase 콘솔에서 Clode Firestore는 '시작하기' 버튼으로 쉽게 추가할 수 있습니다. Firestore Database를 추가하면, 컬렉션, 문서, 필드로 이루어진 구조를 볼 수 있습니다. 특정 데이터의 집합을 '컬렉션'이라고 부르고, 이 컬렉션에 특정 필드들을 추가할 때마다 하나의 문서로 생성되어 컬렉션에 저장되게 됩니다.

Cloud Firestore 플러그인 추가하기

dependencies:
  image_picker: ^0.8.6
  google_sign_in: ^5.4.2
  firebase_core : ^1.24.0
  firebase_auth: ^3.11.2
  cloud_firestore: ^3.5.1

pubspec.yaml 파일에 Cloud Firestore 플러그인 사용을 위한 버전을 추가해줍니다. 위 예제에서는 현재 최신 버전인 3.5.1을 적용했습니다.  

 

플러터 프로젝트에서 코드 작성하기

_uploadPost() 메서드는 이전 포스트에서 다룬 Cloud Storage에 파일을 저장한 뒤 이 Task의 레퍼런스를 통해 파일 저장 위치에 대한 URL을 얻고, Firestore의 post라는 컬렉션에 id, photo url, contents, email, display name, user photo url을 필드로 포함하는 새로운 문서를 생성하고 있습니다. _uploadPost() 메서도의 실행 결과 문서는 앞서 살펴본 Firebase 콘솔의 Cloud Firestore DB에 저장되어 Cloud Storage에 저장된 파일 참조 및 Firebase에 로그인한 유저 정보 등을 담게 됩니다.

 

더 읽어보기 👉

https://firebase.google.com/docs/database/rtdb-vs-firestore?authuser=0&hl=ko 

https://firebase.google.com/docs/firestore/data-model?hl=ko 

댓글