flutter에서 firestore 사용하기(1)

Namkyu Park

Published in

Flutter Seoul

7 min readNov 18, 2019

firebase 및 firestore 연동하기

들어가며

Firestore는 flutter 개발자에게 쉽고 간편한 데이터베이스를 제공합니다. 하지만 Firestore의 공식문서에는 flutter의 예제코드가 존재하지 않아 사용하는데 불편함을 겪을 수 밖에 없습니다. 앞으로 세번의 글을 써나가면서, Firestore를 처음 접하는 flutter 개발자에게 Firestore의 가장 기본적이면서도 중요한 기능들을 알려드리겠습니다. 첫번째 글에서는 flutter 에서 Firebase 및 Firestore를 연동하는 방법에 대해 설명하겠습니다:)

시작하기 전에..

실습은 윈도우, 안드로이드 스튜디오에서 진행합니다.
안드로이드 운영체제를 기준으로 설명합니다.
flutter의 기본적인 설정(SDK설치 등)이 완료되었다는 가정하에 진행합니다.

Firebase 연동하기

Firestore는 Firebase에 속한 제품이기 때문에, 먼저 Firebase를 사용가능하게 설정해야 합니다. Firebase공식홈페이지에 들어가 구글 아이디로 로그인 합니다. 그후 밑에 화면에 있는 “get started”버튼을 클릭합니다.

그후 밑에 화면에 보이는 프로젝트 만들기를 클릭합니다.

프로젝트 이름은 본인이 원하는 이름을 사용하면 되고,약관 동의 후 ‘계속’ 버튼을 클릭합니다.

다음화면에 나오는 구글 애널리틱스는 우리의 지향점과는 맞지 않으므로 체크를 해제하고 다음 버튼을 클릭합니다.

프로젝트 생성이 완료되면 다음과 같은 화면이 나오게 됩니다. 앞으로의 실습은 안드로이드 운영체제에서 진행되므로 안드로이드 아이콘을 클릭합니다.

버튼을 클릭하면 다음과 같은 화면이 나옵니다. 이제 이 화면은 그대로 두고, 안드로이드 스튜디오를 열어 새로운 flutter 프로젝트를 만들어주세요:)

flutter프로젝트를 만들었으면, <project>/android/app/build.gradle 파일을 열어줍니다.

해당파일의 코드중 아래 보이는 applicationId의 내용을 복사합니다. 이 예제의 경우에는 ga.trialxerror.www.flutter_firestore 이며,이 내용을 다시 홈페이지로 돌아와 Android 패키지 이름에 붙여넣기를 하고 다음 버튼을 누릅니다

android {
    ...
    defaultConfig {
        applicationId "ga.trialxerror.www.flutter_firestore"
        ...
    }
    ...
}

밑에 보이는 다운로드 버튼을 클릭한 뒤, 해당 파일을 <project>/android/app 디렉토리에 추가합니다

다음과 같이 파일이 배치되어야 합니다.

표시해둔 빨간색 부분을 클릭하여 복사한 뒤, 안드로이드 스튜디오의 <project>/build.gradle 파일을 열어 dependencies에 붙여넣기합니다. 그리고 현재 2019년 11월 기준으로 dependencies를 다음과 같이 수정합니다.

buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.2'
        classpath 'com.google.gms:google-services:4.3.2'
    }
}...

표시해둔 빨간색 부분을 클릭하여 복사한 뒤, 안드로이드 스튜디오의<project>/android/app/ build.gradle 파일을 열어 제일 하단에 붙여넣기합니다.