<h2 id="%E5%85%AC%E5%BC%8F%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE%E6%89%8B%E9%A0%86%E3%82%92%E3%82%82%E3%81%A8%E3%81%AB%E3%80%81flutter%E3%81%A8firebase%E3%81%AE%E9%80%A3%E6%90%BA%E3%82%92%E8%A1%8C%E3%81%84%E3%81%BE%E3%81%99">
<a class="header-anchor-link" href="#%E5%85%AC%E5%BC%8F%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE%E6%89%8B%E9%A0%86%E3%82%92%E3%82%82%E3%81%A8%E3%81%AB%E3%80%81flutter%E3%81%A8firebase%E3%81%AE%E9%80%A3%E6%90%BA%E3%82%92%E8%A1%8C%E3%81%84%E3%81%BE%E3%81%99" aria-hidden="true"></a> 公式ドキュメントの手順をもとに、FlutterとFirebaseの連携を行います</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c21db0843bf87" src="https://embed.zenn.studio/card#zenn-embedded__c21db0843bf87" data-content="https%3A%2F%2Ffirebase.google.com%2Fdocs%2Fflutter%2Fsetup%3Fhl%3Dja%26platform%3Dweb" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://firebase.google.com/docs/flutter/setup?hl=ja&amp;platform=web" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://firebase.google.com/docs/flutter/setup?hl=ja&amp;platform=web</a></p>
<h4 id="%E5%89%8D%E6%8F%90%E6%9D%A1%E4%BB%B6">
<a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90%E6%9D%A1%E4%BB%B6" aria-hidden="true"></a> 前提条件</h4>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--bCfjta3d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/efb96d42e2d0ef9a7faec8c8.jpeg%3Fsha%3D975f4e2271a654adf9783761d4ef9efc6c01211b" loading="lazy" class="md-img"></p>
<ul>
<li>IDEをインストール：VS-codeをインストール</li>
<li>Flutterをインストール：VMインスタンスに<code>sudo snap install flutter --classic</code>でインストール</li>
<li>Firebaseにログイン：プロジェクトの作成まで行う</li>
</ul>
<h4 id="step1">
<a class="header-anchor-link" href="#step1" aria-hidden="true"></a> step1</h4>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--TnnzMIGV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/66ccafa2b972f712985c4f45.jpeg%3Fsha%3D044e1df99eb86ece395d4088325004a143e773c4" loading="lazy" class="md-img"></p>
<ul>
<li>1.インストールする</li>
</ul>
<details><summary>「Firebase CLI をインストール」</summary><div class="details-content">
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--L30m4exO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/3e6871d479b49fbe42353ac0.jpeg%3Fsha%3Ddde947cafb02382c66f1932856bc5dc0a3fbe7ef" loading="lazy" class="md-img"><br>
VMインスタンスへSSH接続し以下のコマンドを実行</p>
<ul>
<li><code>curl -sL https://firebase.tools | bash</code></li>
<li><code>firebase login --no-localhost</code></li>
<li><code>firebase projects:list</code></li>
<li><code>curl -sL https://firebase.tools | upgrade=true bash</code></li>
</ul>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p><code>no-localhost</code>をつけておく方がどんな環境でも対応できるので無難</p>
</div></aside>
</div></details>
<ul>
<li>2.<code>firebase login</code>はFirebase CLIインストール時に行ったので不要</li>
<li>3.VMインスタンスで<code>dart pub global activate flutterfire_cli</code>を実行</li>
<li>flutterfireのパスを通すため<code>.bashrc</code>などに<code>export PATH="$PATH":"$HOME/.pub-cache/bin"</code>を追記</li>
</ul>
<h4 id="step2">
<a class="header-anchor-link" href="#step2" aria-hidden="true"></a> step2</h4>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--Qz99rhei--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/33f8e27a482ca3a1b47ff8b5.jpeg%3Fsha%3D4edbc2ded312edc11d90f0604a33a2f9a347f1f7" loading="lazy" class="md-img"></p>
<aside class="msg alert"><span class="msg-symbol">!</span><div class="msg-content">
<p>これを実行する前にやるべきことがあります。</p>
<ul>
<li>Flutterアプリの作成</li>
<li>Firebaseプロジェクトの作成</li>
</ul>
</div></aside>
<details><summary>Flutterアプリの作成</summary><div class="details-content">
<ul>
<li>githubから取得する場合は<code>git clone https://github.com/yukip-20000418/hello.git</code>を実行</li>
<li>新規作成の場合は<code>flutter create hello</code>を実行</li>
</ul>
</div></details>
<details><summary>Firebaseプロジェクトの作成</summary><div class="details-content">
<ul>
<li>Firebaseコンソールからプロジェクトを作成する（画面は割愛）</li>
<li>今回は既存のGoogleCloudのプロジェクトを指定した</li>
<li>
<code>firebase projects:list</code>で表示されればOK</li>
</ul>
</div></details>
<ul>
<li>Flutterプロジェクトのディレクトリ内で<code>flutterfire configure</code>を実行</li>
</ul>
<h4 id="step3">
<a class="header-anchor-link" href="#step3" aria-hidden="true"></a> step3</h4>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--ST_XHqiv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d1c4a7906ad9f354f3fd0998.jpeg%3Fsha%3D83de9b5d80ac444ff1bc426cd93b7f950d7a63be" loading="lazy" class="md-img"></p>
<ul>
<li>1.<code>flutter pub add firebase_core</code>
</li>
<li>2.<code>flutterfire configure</code>
</li>
<li>3.4.<code>flutter create hello</code>などで新規作成した場合行う</li>
<li>5.行わない</li>
</ul>
<h4 id="step4">
<a class="header-anchor-link" href="#step4" aria-hidden="true"></a> step4</h4>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--sBWIZlDh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/02b533d271853a1f6458b835.jpeg%3Fsha%3D0e77fb8750faae703b2a91ea9d9b3742ca94b7c3" loading="lazy" class="md-img"><br>
今回はFirestoreを使用するのでFirestoreのプラグインを追加する</p>
<ul>
<li>1.<code>flutter pub add cloud_firestore</code>
</li>
<li>2.<code>flutterfire configure</code>
</li>
<li>3.行わない</li>
<li>データベース関連のコーディングを行う</li>
</ul>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>事前にFirebaseコンソールでデータベースの作成が必要（画面は割愛）</p>
</div></aside>
<h2 id="%E5%AE%9F%E9%9A%9B%E3%81%AB%E4%BD%9C%E6%A5%AD%E3%81%97%E3%81%9F%E5%8B%95%E7%94%BB%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89">
<a class="header-anchor-link" href="#%E5%AE%9F%E9%9A%9B%E3%81%AB%E4%BD%9C%E6%A5%AD%E3%81%97%E3%81%9F%E5%8B%95%E7%94%BB%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89" aria-hidden="true"></a> 実際に作業した動画はこちら</h2>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/5fWEvScBQG8" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://youtu.be/5fWEvScBQG8" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://youtu.be/5fWEvScBQG8</a></p>


FlutterとFirebaseの連携

公式ドキュメントの手順をもとに、FlutterとFirebaseの連携を行います

Discussion