Flutter & Firestore で気軽に永続化してオラオラする方法

🧑‍💻 まえがき

■やること

• Flutter & Firebase Firestore にて、必要最低限の実装内容で動くものを作成

■作業概要

• STEP0：事前準備、参考資料
• STEP1：firebaseの設定
• STEP2：設定ファイルの配置
• STEP3：パッケージの追加
• STEP4：接続テスト
• STEP5：firestoreの準備
• STEP6：コードの実装

■下記の症状に効能があります

• flutter & firestore の日本語資料がない
• 公式教材やってみたけど、バージョンが古くて動かない
• もっと気軽に普段からオラオラできたら便利
• てめぇは俺を怒らせた

■環境

• editer：VScode
• flutter：1.22.5
• Dart：2.10.4
• xcode：12

📗STEP0：事前準備、参考資料

• Flutter環境構築
  • https://flutter.dev/docs/get-started/install/macos
• サンプルappの作成
  • https://flutter.dev/docs/get-started/test-drive?tab=vscode
• firebaseの繋ぎ込み
  • https://firebase.google.com/docs/flutter/setup?hl=ja
• firestore用の教材
  • https://codelabs.developers.google.com/codelabs/flutter-firebase/index.html?hl=ja#9

🔥STEP1：firebaseの設定

■appプロジェクト作る

• 先にappのプロジェクトを作成すること
• プロジェクト作成
  • flutter create sampleApp
• シュミレーター起動
  • open -a Simulator
• projectの起動

cd flutter_sample
flutter run

■firebaseの設定

• コンソール画面で「プロジェクトを追加」
• アナリティクスの設定は適当でok!

📃STEP2：設定ファイルの配置(iOS)

• 下記からiosとandroidの設定をそれぞれ追加

- バンドルIDをxcodeで確認して入力

• GoogleService-Info.plistをダウンロード
• plistを"xcodeから"pjの"Runner/Runnerディレクトリ"に追加する
• その時、表示されるダイアログでcopyにチェックが入ってることを必ずチェック（私はこれではまった）

• ファイルの追加を行ったら、firebaseのios設定画面STEP3と4はスキップでok ＊もともとxcodeでの追加設定前提の内容なので、ファイル追加以降の操作は不要

📚STEP3：パッケージの追加

• /pubspec.yamlのdependenciesに下記を追加
• ＊最新版のバージョンはそれぞれ下記から確認
  • https://pub.dev/packages/firebase_core/install
  • https://pub.dev/packages/firebase_analytics/install
  • https://pub.dev/packages/cloud_firestore/install

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.5.3 ←追加
  firebase_analytics: ^6.3.0 ←追加
  cloud_firestore: ^0.14.4 ←追加

✅STEP４：接続テスト

• デフォルトのmain.dartに下記のように追記

main.dart

import 'package:flutter/material.dart';
import 'package:firebase_analytics/firebase_analytics.dart'; //←追加
import 'package:firebase_analytics/observer.dart'; //←追加

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  static FirebaseAnalytics analytics = FirebaseAnalytics(); //←追加
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      //↓追加
      navigatorObservers: [
        FirebaseAnalyticsObserver(analytics: analytics),
      ],
    );
  }
}

• flutter runを実行（＊runするとpluginが自動でinstallされる&podfileも更新される）
• firebase→dashboardを確認
• 下記のように「過去30分間のユーザー」に反応があれば接続成功

🗄STEP5：firestoreの準備

■DB作成

• コンソールからClound Firestore > データベースの作成を選択
  

• テストモードを選択
  

• 地域はasia-northeast1(東京)を選択
  

■サンプルデータを作成

• コレクション（sqlで言うところのテーブル名）を設定
• ドキュメント（sqlで言うところのレコード）を作成
• （IDは自動IDを選択すると自動で振ってくれます）
• 作成後はこんな感じ

🧑‍💻STEP6：コードの実装

• main.dartを下記に変更

main.dart

import 'package:flutter/material.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';
import 'package:cloud_firestore/cloud_firestore.dart'; //←追加
import 'package:firebase_core/firebase_core.dart'; //←追加

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: 'やれやれだぜ'),
      navigatorObservers: [
        FirebaseAnalyticsObserver(analytics: analytics),
      ],
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    final Future<FirebaseApp> _initialization = Firebase.initializeApp();
    return FutureBuilder(
      future: _initialization,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          return _streamBuilder();
        }
        return LinearProgressIndicator();
      },
    );
  }

  Widget _streamBuilder() {
    return StreamBuilder<QuerySnapshot>(
      stream: FirebaseFirestore.instance.collection('rushes').snapshots(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) {
          return LinearProgressIndicator();
        }
        return _buildList(snapshot.data.docs);
      },
    );
  }

  Widget _buildList(List<DocumentSnapshot> snapshot) {
    return ListView(
      padding: const EdgeInsets.only(top: 20.0),
      children: snapshot.map((data) {
        return _buildListItem(data);
      }).toList(),
    );
  }

  Widget _buildListItem(DocumentSnapshot data) {
    final rushes = Rushes(data);

    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(6.0),
        ),
        child: ListTile(
            title: Text(rushes.makeOraOra()),
            trailing: FlatButton(
              onPressed: () {
                rushes.reference.update({'times': 0});
              },
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.delete,
                  ),
                  Text(rushes.times.toString()),
                ],
              ),
            ),
            onTap: () {
              rushes.reference.update({'times': FieldValue.increment(1)});
            }),
      ),
    );
  }
}

class Rushes {
  String word;
  int times;
  DocumentReference reference;

  Rushes(DocumentSnapshot snapshot) {
    var map = snapshot.data();
    this.word = map['word'];
    this.times = map['times'];
    this.reference = snapshot.reference;
  }

  String makeOraOra() {
    var ret = "";
    for (var i = 0; i < times; i++) {
      ret += word;
    }
    return ret;
  }
}

🎊🤸‍🎉Congratulations!🎉🤸‍🎊

完成したら、いいね！&コメントに「ワッフルワッフル」と叫んでください😆✨

📱サンプルはこちら📱

💾 https://github.com/TD3P/flutter_rushMaker

🌟ご指摘大歓迎🌟

ここちゃうで！！っていうとこあったら、教えてもらえると嬉しいです！！

シリーズ情報

📱Flutterで基本のTODOアプリを作ってみよう
https://qiita.com/pe-ta/items/b3b7458059c1fd7efcf0

📱Flutterでページ遷移するTODOアプリを作ってみよう
https://qiita.com/pe-ta/items/e547c4cf460319f5093c

📱Flutter x Firestore で気軽に永続化してオラオラする方法
https://qiita.com/pe-ta/items/ccd49fc396b063a821af