2020/10/26 Flutter✖️Firebase : Cloud Firestoreパッケージを使用する

 

前回firebase_authを使えるところまできたので、今回は変更後(breaking change)のバージョンのCloud Firestoreを使っていきます。

前回作ったbc_ffプロジェクトでやっていきます。

まず依存関係のコードをpubspec.yamlに追加します。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^0.18.1+2
  google_sign_in: ^4.5.1
  flutter_signin_button: ^1.0.0
  cloud_firestore: ^0.14.1+3  #←追加

現時点での最新バージョンを追加します。

---

https://firebase.flutter.dev/docs/firestore/usage#collections–documents

本来ファイルを分けて別画面(ウィジェット)作るのが普通ですが、動くかどうかのテストなのでmain.dartに追加します(笑)

main.dart

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_signin_button/button_builder.dart';

import './register_page.dart';
import './signin_page.dart';

import 'package:cloud_firestore/cloud_firestore.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(AuthExampleApp());
}

/// The entry point of the application.
///
/// Returns a [MaterialApp].
class AuthExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Firebase Example App',
        theme: ThemeData.dark(),
        home: Scaffold(
          body: AuthTypeSelector(),
        ));
  }
}

/// Provides a UI to select a authentication type page
class AuthTypeSelector extends StatelessWidget {
  // Navigates to a new page
  void _pushPage(BuildContext context, Widget page) {
    Navigator.of(context).push(
      MaterialPageRoute<void>(builder: (_) => page),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Firebase Example App"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            child: SignInButtonBuilder(
              icon: Icons.person_add,
              backgroundColor: Colors.indigo,
              text: 'Registration',
              onPressed: () => _pushPage(context, RegisterPage()),
            ),
            padding: const EdgeInsets.all(16),
            alignment: Alignment.center,
          ),
          Container(
            child: SignInButtonBuilder(
              icon: Icons.verified_user,
              backgroundColor: Colors.orange,
              text: 'Sign In',
              onPressed: () => _pushPage(context, SignInPage()),
            ),
            padding: const EdgeInsets.all(16),
            alignment: Alignment.center,
          ),

          AddUser('Test Tarou','TesTes.inc',20),  //←追加


        ],
      ),
    );
  }
}


//https://firebase.flutter.dev/docs/firestore/usage#collections--documents
class AddUser extends StatelessWidget {
  final String fullName;
  final String company;
  final int age;

  AddUser(this.fullName, this.company, this.age);

  @override
  Widget build(BuildContext context) {
    // Create a CollectionReference called users that references the firestore collection
    CollectionReference users = FirebaseFirestore.instance.collection('users');

    Future<void> addUser() {
      // Call the user's CollectionReference to add a new user
      return users
          .add({
        'full_name': fullName, // John Doe
        'company': company, // Stokes and Sons
        'age': age // 42
      })
          .then((value) => print("User Added"))
          .catchError((error) => print("Failed to add user: $error"));
    }

    return FlatButton(
      color:Colors.yellow,
      onPressed: addUser,
      child: Text(
        "Add User",
      ),
    );
  }
}

実行する前に、FirebaseコンソールでFirestoreのデータベースを作成します。

「データベースの作成」ボタンを押します。

---

テストモードを選択して「次へ」を押します。

---

ロケーションを選択します。

練習ならasianortheast1〜3のどこでもいいんですが、リリースするつもりなら、リリースしたアプリが主に使用される場所を選択してください。

ここで選んだロケーションは変更できないようなので、よく考えて選びましょう。ただそこまで重要ということでもないです。

---

実行ボタンを押して実行します。

黄色の「Add User」ボタンを押すと、

初めて押した時は、自動的に’users’コレクションが生成されました。今回は、

AddUser('Test Tarou','TesTes.inc',20),

としているので、ボタンを押した回数だけ全く同じ内容のドキュメントがfirestoreのデータベースに追加されます。

実際追加されています。

とりあえずこれでfirestoreを使えているので、あとは

https://firebase.flutter.dev/docs/firestore/usage

新しいドキュメントを見て使い方を学んでいきます。