surga Lab

開発したい!!

Flutter Firestoreのサンプルを動かしてみる

FlutterでFirestoreを扱ってみます。

Firebaseの導入

まずはFlutterのプロジェクトにFirebaseを対応させます。

対応手順はこれ以上ないくらい公式に記載されていますので、割愛します。

ステップ4まで進めましょう。

firebase.google.com

Firestoreの導入

pubspec.yamlへ下記のように指定します。
その際、最新のバージョンはpub.devから確認します。

なお「Firebaseの導入」で使った公式ドキュメントにはfirebase_core: ^0.2.5と記載されていますが、
最新のcloud_firestoreでは0.4.0を要求されますので、書き換える必要があります。(2019/6/24の情報)

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.4.0
  cloud_firestore: ^0.12.5+2

Cannot fit requested classes in a single dex fileとエラーが出た場合は下記記事を参考にしてください。

blog.hisurga.com

あとは下記のようにimportすれば使用することができます。

import 'package:cloud_firestore/cloud_firestore.dart';

Firestoreデータベースの作成

プロジェクト毎のFirebaseコンソール > Firestore
からFirestoreデータベースを作成します。中身は空で大丈夫です。

サンプルを試す

公式のサンプルコードほぼそのままで試してみます。

アプリ起動時は何も表示されません。

f:id:hisurga:20190624011608p:plain:w200

Firebaseコンソールからコレクションを追加してみます。

f:id:hisurga:20190624011707p:plain:w500

コレクションIDをbooksにします。

f:id:hisurga:20190624011921p:plain:w500

ドキュメントにtitleauthorを記載します。
IDは特に理由がなければ自動IDで問題ありません。

f:id:hisurga:20190624011946p:plain:w500

データベースにコレクションとドキュメントが追加されました。

f:id:hisurga:20190624012026p:plain:w500

アプリ上では、追加された瞬間にサンプルアプリへ情報が反映されました。

f:id:hisurga:20190624012118p:plain:w200

ドキュメントを追加しても更新されます。

f:id:hisurga:20190624013008p:plain:w200

コードは以下になります。

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firestore Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Firestore Demo Page'),
    );
  }
}

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: StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance.collection('books').snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
          switch (snapshot.connectionState) {
            case ConnectionState.waiting:
              return new Text('Loading...');
            default:
              return new ListView(
                children:
                    snapshot.data.documents.map((DocumentSnapshot document) {
                  return new ListTile(
                    title: new Text(document['title']),
                    subtitle: new Text(document['author']),
                  );
                }).toList(),
              );
          }
        },
      ),
    );
  }
}

コンソールでは使用状況も容易に把握できます。めっちゃ見やすいですね。

f:id:hisurga:20190624013628p:plain:w500

参考

Flutter アプリに Firebase を追加する  |  Firebase

cloud_firestore | Flutter Package