🐡

【Flutter】Firebase修行②　『Firestore』でデータ追加・削除✨

2023/02/19に公開

Firebase

Firestore

Flutter

tech

【修行】アプリにFirebaseを組み込む📱

この記事はFirebaseの修行のための忘備録的な感じで書いていきます✨
今回はデータ追加や削除の『Firestore』をアプリに組み込んでいきます。

👨『サボテンが、花をつけている…』

「Firestore」の有効化手順

下記サイトを参考に「Firestore」の有効化を行いました。

パッケージのインストール

下記サイトからfirebase_authのパッケージをインストールします。

$ flutter pub add cloud_firestore

実装例

このアプリでは、①Cloud Firestoreに登録しているデータの取得②データの追加と更新③データの削除を行います。

Twitterに上げた動画はこちら

実際のコードを下記に記載。

firebase_auth.dart

import 'package:firebase_test2/original_dialog.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class MyHomePage2 extends StatefulWidget {
  const MyHomePage2({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState2 extends State<MyHomePage2> {
  //Cloud Firestoreから取得したデータを格納する変数
  String get_data = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Colors.white10,
      appBar: AppBar(
        title: Text('Cloud Firestore のテスト'),
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                //データの取得
                FirebaseFirestore.instance
                    .doc('flutterDataCollection/flutterDataDocument')
                    .get()
                    .then((ref) {
                  print(ref.get("mydata"));
                  setState(() {
                    get_data = ref.get("mydata");
                  });
                });
              },
              child: const Text(
                'データ取得',
                style: TextStyle(fontSize: 18),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  padding: const EdgeInsets.fromLTRB(16, 0, 16, 0),
                  child: Card(
                    child: Text(
                      '取得したデータ：$get_data',
                      style: TextStyle(fontSize: 18),
                    ),
                  ),
                ),
                IconButton(
                  onPressed: () {
                    setState(() {
                      get_data = '';
                    });
                  },
                  icon: const Icon(Icons.refresh),
                )
              ],
            ),
            ElevatedButton(
              onPressed: () async {
                // 追加と更新どちらも可能
                FirebaseFirestore.instance
                    .doc('データ①/データ①')
                    .set({'データ①': "abc123"});
                showAlertDialog(
                  context,
                  // 好きな文字列を入れてください。
                  title: 'データ① の追加完了',
                  // 好きな文字列を入れてください。
                  content: 'データ① の追加完了しました',
                );
              },
              child: const Text(
                'データ① の追加(データの更新も可))',
                style: TextStyle(fontSize: 18),
              ),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.amber, // background
                onPrimary: Colors.white, // foreground
              ),
              onPressed: () async {
                // 追加
                FirebaseFirestore.instance
                    .collection('データ②')
                    .add({'データ②': "xyz123"});
                showAlertDialog(
                  context,
                  // 好きな文字列を入れてください。
                  title: 'データ② の追加完了',
                  // 好きな文字列を入れてください。
                  content: 'データ② の追加完了しました',
                );
              },
              child: const Text(
                'データ② の追加のみ',
                style: TextStyle(fontSize: 18),
              ),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.redAccent, // background
                onPrimary: Colors.white, // foreground
              ),
              onPressed: () async {
                // 削除
                FirebaseFirestore.instance.doc('データ①/データ①').delete();
                showAlertDialog(
                  context,
                  // 好きな文字列を入れてください。
                  title: 'データ① の削除完了',
                  // 好きな文字列を入れてください。
                  content: 'データ① の削除完了しました',
                );
              },
              child: const Text(
                'データ① の削除',
                style: TextStyle(fontSize: 18),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【修行】アプリにFirebaseを組み込む📱

「Firestore」の有効化手順

パッケージのインストール

実装例

Discussion