FlatterとFirestote(DB)連携

Flutterのアプリができている状態でこの記事を読んでいただけると良いと思います。

#Firebase編
####Firebaseでプロジェクトを作成する
![スクリーンショット 2020-12-20 8.53.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/c65fce23-3cbd-73f0-1f39-bb384e56ac52.png)
`プロジェクトを追加`ボタンを押す
プロジェクト名を記入
そのまま流れにそって続けると、、

プロジェクtの作成に成功しました！！！

### Firebaseと連携する(iOS, Android)
参考：`https://firebase.google.![Something went wrong]()
com/docs/flutter/setup?hl=ja`
#####iOSと連携

![スクリーンショット 2020-12-20 8.58.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/87d75eb1-8403-5106-4928-4ff17f766369.png)
`iOS`の丸いボタンをクリックすると次のような画面に移行します。
![スクリーンショット 2020-12-20 9.01.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/de02242a-15d7-5345-a4d3-7ae85c59cc03.png)

iOSハンドルの確認方法は

```terminal
$ open ios
```

このファイルをクリック
![スクリーンショット 2020-12-20 9.43.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/bcc2f542-807f-7fd3-6a35-7ded4b2982e4.png)

そしたらXcodeが自動で開くと思うので、左上のRunnerをクリック
上から2つ目の`com.gonza.roomMobileApp`が`iOSハンドルID`
![スクリーンショット 2020-12-20 9.44.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/865a287a-faf1-9357-930f-a8d083a76d4b.png)

こんな感じでひとまず登録
![スクリーンショット 2020-12-20 9.47.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/8d63d4e6-1c3b-ee7e-3b57-566d2109d315.png)
次にファイルをダウンロードし、指定された場所にうつす
#####Runnerのファルダの中に入れる
![スクリーンショット 2020-12-20 9.51.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/501c1a48-ffe6-021d-f477-f421a01a0f0c.png)
3番目は飛ばします。今回はFlutterのアプリであり、Swiftではないのでここは無視して構いません
### ここは飛ばす(そのまま次へを押して構わない)
![スクリーンショット 2020-12-20 9.56.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/c93a7071-7be9-e538-61f6-39008842ec3d.png)

## Flutter用のSDKを入れる
```yml:room_mobile_app/pub_spec.yaml
...
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0
  provider: ^4.1.3
  # FirebaseのSDK、この2つを追加する
  firebase_core: ^0.4.5
  cloud_firestore: ^0.13.6
...
```
次に　pub getをする

```
$ flutter pub get
```

そしてシミレーターを起動
上手くできたら、次に
##DBを作る
![スクリーンショット 2020-12-20 10.13.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/ab4ef653-6590-a7c1-cc69-001c2003b499.png)
左の上から4番目のタブを押してもらうと、cloud firestoreのページになるので、ここで
`データベースの作成`を押してもらう
今回はテストモードで作るので
![スクリーンショット 2020-12-20 10.15.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/0335fc57-4867-3047-d78a-471ca99adfc0.png)
DBの場所はどこでもいいので
![スクリーンショット 2020-12-20 10.15.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/c26cfcfe-10d2-a654-109e-eea9d577f28b.png)
有効にするをクリック！！

これで下準備は完了です

## Androidとの連携
アプリを追加
![スクリーンショット 2020-12-20 10.22.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/8b2f68ed-5eb4-c4b2-f6dd-d545d52feece.png)
androidをクリック
![スクリーンショット 2020-12-20 10.22.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/cf6e7143-9910-7350-a573-4ee0af1a0cca.png)
### 次にAndroidパッケージ名は
![スクリーンショット 2020-12-20 10.24.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/e61e671a-f06a-42c1-114f-a17c5f92d9b1.png)

Command+Shift+Oで`manifest`と調べると
こんな感じで出てくると思うので
![スクリーンショット 2020-12-20 10.26.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/4012b536-36a2-ce70-5641-ecbd181caf85.png)
android/app/src/mainのファイルを開く

```xml:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gonza.room_mobile_app">
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="room_mobile_app"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
........
```
この中の`com.gonza.room_mobile_app`がパッケージネームです。(上から2行目のやつ)
これを貼り付けて、ニックネームは適当に
![スクリーンショット 2020-12-20 10.29.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/36f2b24f-9b36-5937-d847-88c5161c390a.png)

###ファイルをダウンロードして所定の位置に移動
![スクリーンショット 2020-12-20 10.30.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/c66a6afd-7784-62ac-6880-b280bd2b5dce.png)
場所はandroid/app以下に移動します。
ドラッグ＆ドロップが一番いいと思う、、、
![スクリーンショット 2020-12-20 10.32.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/5c6198a0-1b77-2687-4be3-37056b120a2c.png)
リファクタリングをクリックして
![スクリーンショット 2020-12-20 10.32.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/12150c6c-8c6d-0440-64d1-a7efa07e2769.png)
### こんな感じで置けていたらOK！(google-service.jsonが)
![スクリーンショット 2020-12-20 10.32.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/59ad0cec-88c2-5e2e-001c-7d5cf78659c6.png)

### Android／build．gradleを編集![スクリーンショット 2020-12-20 10.36.33.png]
(https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/0c02ae82-68e6-5a3e-2cf1-e6822b5ab2ef.png)

```gradle:room_mobile_app/android/build.graidle
buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        // 追加
        classpath 'com.google.gms:google-services:4.3.4'
    }
}
allprojects {
    repositories {
        google()
        jcenter()
    }
}
rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}
task clean(type: Delete) {
    delete rootProject.buildDir
}
```
次にappの中のbuild.graidleを編集します。

```gradle:room_mobile_app/android/app/build.graidle
.......
apply plugin: 'com.android.application'
// 下の1行を追加
apply plugin: 'com.google.gms.google-services'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
.......
dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    // 2行を追加
    implementation platform('com.google.firebase:firebase-bom:26.1.1')
    implementation 'com.google.firebase:firebase-analytics'
}

```

pubgetをします。

```terminal
flutter pub get
```
### 次にAndroidX　Migrationを行う
![スクリーンショット 2020-12-20 10.45.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/8fef7484-a2a9-f172-75bd-ff6924108b70.png)
上のナビバーからRefactorを選択し、Migrationをクリック
そのままRun
![スクリーンショット 2020-12-20 10.46.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/b955993c-c3af-da7e-c5d8-62766c8a5907.png)

### Firebaseのライブラリを入れたことによって起きるエラーを解決する
参考:`https://developer.android.com/studio/build/multidex`
64Kを超えるメソッドを使用する際には

```gradle:room_mobile_app/android/app/build.graidle
android {
    defaultConfig {
        ...
        minSdkVersion 15
        targetSdkVersion 28
　　　　　//こいつを追加
        multiDexEnabled true
    }
    ...
}

dependencies {
　　//これも追加
  implementation 'com.android.support:multidex:1.0.3'
}

```
完成

## 補足
Commad+shift+Fで`minsdk`と調べてもらって、
MinSDKのバージョンが21以上であれば起きないエラーだそうです。
![スクリーンショット 2020-12-20 10.49.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239663/17ee64a8-ab9b-4aca-9998-8ba2faededc0.png)