LoginSignup
3
8

More than 5 years have passed since last update.

Flutter_DB操作(firebase)

Last updated at Posted at 2019-04-21

概要

firebaseを使用したデータ操作方法(登録、更新、削除、取得)を説明します。

準備

プロジェクト追加(firebase)

下記のページからコンソール画面を開きます。
https://firebase.google.com/?hl=ja

firebase_0.jpg

プロジェクトを追加します。
firebase_1.jpg
firebase_2.jpg
firebase_3.jpg
firebase_4.jpg

アプリケーション追加(firebase)

アンドロイドのアイコン部分をクリックします。
firebase_0_1.jpg

パッケージ名を入力する箇所があるので、
app配下の「build.gradle」をを開き、パッケージ名を貼り付けます。
firebase_7.jpg
firebase_6.jpg

JSONファイルをダウンロードし、「app」配下に配置します。
firebase_8.jpg

記載されている通り、
- プロジェクト配下の「build.gradle」
- app配下の「build.gradle」
それぞれを変更します。
firebase_9.jpg

アプリケーションを実行、手順は完了です。
firebase_15.jpg

Database作成

firebase_database1.jpg
firebase_database2.jpg
firebase_database3.jpg

firebase_database4.jpg
firebase_database5.jpg
データを更新できるように設定を変更します。
allow read, write: if false;

allow read, write: if true;
firebase_database6_1.jpg
firebase_database6_2.jpg

「pubspec.yaml」の「dependencies」に、下記の2行を追加します。

firebase_core: ^0.3.4
cloud_firestore: ^0.9.13

firebase_0_2.jpg

「\app\build.gradle」に

multiDexEnabled true

を追加します。
firebase_0_3.jpg
この設定をしないと、実行時に下記のエラーが表示されます。

FAILURE: Build failed with an exception.

このエラーは、
Androidアプリのビルドシステムの都合で、
メソッド数が65536を超えるとビルドできないという制約があるために起こるそうです。

プログラミング

以下の通りファイルを作成します。
・\lib\entity\User.dart

/**
 * ユーザクラス
 */
class User {
  String name;

  // コンストラクタ
  User();

  // コンストラクタ
  User.fromMap(Map<String, dynamic> map) {
    this.name = map[UserField.name];
  }

  // Firestore用のMapに変換
  Map<String, dynamic> toMap() {
    return {
      UserField.name: this.name,
    };
  }
}
/**
 * フィールド名
 */
class UserField {
  static const name = "name";
}

class UserDocument {
  String documentId;
  User user;

  UserDocument(this.documentId, this.user);
}

・\lib\entity\UserDatastore.dart

import 'User.dart';
import 'package:cloud_firestore/cloud_firestore.dart'; //

class UserDatastore {
  static String getCollectionPath() {
    return "users";
  }

  static String getDocumentPath(String documentId) {
    return "users/$documentId";
  }

  /**
   * 登録
   */
  static String registration(User user) {
    final newDocument = Firestore.instance.collection(getCollectionPath()).document();
    newDocument.setData(user.toMap());

    return newDocument.documentID;
  }

  /**
   * 取得
   */
  static Future<User> findById(String documentId) async {
    final snapshot = await Firestore.instance.document(getDocumentPath(documentId)).get();

    if (snapshot.exists) {
      return User.fromMap(snapshot.data);
    } else {
      throw Error();
    }
  }

  /**
   * 削除
   */
  static void delete(String documentId) {
    Firestore.instance.document(getDocumentPath(documentId)).delete();
  }

  /**
   * 更新
   */
  static void update(String documentId, User user) {
    Firestore.instance
        .document(getDocumentPath(documentId))
        .setData(user.toMap());
  }
}

・\lib\main.dart

import 'package:flutter/material.dart';
import './entity/User.dart';
import './entity/UserDatastore.dart';

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

class MyApp extends StatefulWidget  {
  @override
  State createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
  UserDocument userDocument;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Firestore Example"),
        ),
        body: Column(
          children: <Widget>[
            Text(userDocument == null
                ? "No user"
                : "User Name: ${userDocument.user.name}"),
            FlatButton(
              child: Text("「nameA」で登録"),
              onPressed: () {
                final user = User();
                user.name = "nameA";

                // 登録したデータを保持
                final documentId = UserDatastore.registration(user);
                setState(() {
                  userDocument = UserDocument(documentId, user);
                });
              },
            ),

            FlatButton(
              child: Text("取得"),
              onPressed: () async {
                final user = await UserDatastore.findById(userDocument.documentId);

                setState(() {
                  userDocument = UserDocument(userDocument.documentId, user);
                });
              },
            ),

            FlatButton(
              child: Text("「nameB」で更新"),
              onPressed: () {
                setState(() {
                  userDocument.user.name = "nameB";
                });

                UserDatastore.update(
                  userDocument.documentId, userDocument.user
                );
              },
            ),

            FlatButton(
              child: Text("削除"),
              onPressed: () {
                UserDatastore.delete(userDocument.documentId);

                // 削除したデータを保持状態から外す
                setState(() {
                  userDocument = null;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

動作確認

実際に画面を操作して、動作を確認していきます。

登録

「nameAで登録」ボタンをタップ後、firebaseに登録されることを確認します。
firebase_database_実行_1.jpg
firebase_database_実行_3.jpg

取得

firebase上でmameを「テスト」に変更し「取得」ボタンをタップすると、
上段の名前が「テスト」に変わることが確認できます。
firebase_database_実行_4.jpg
firebase_database_実行_6.jpg

更新

「nameBで更新」ボタンをタップ後、firebaseの登録内容が変わることが確認できます。
firebase_database_実行_7.jpg
firebase_database_実行_8.jpg

削除

「削除」ボタンをタップ後、firebaseの登録データが削除されていることが確認できます。
firebase_database_実行_9.jpg
firebase_database_実行_10.jpg

3
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
8