Flutter

【Flutter】get_itとcloud_firestoreで、Firebase Cloud Firestoreのデータを削除する

作成日：2022年04月16日

更新日：2022年04月16日

前回は、Flutter のパッケージである get_it と cloud_firestore を使い、Firebase のデータベースにデータを追加しました。

【Flutter】get_itとcloud_firestoreで、Firebaseのデータベースにデータを追加する

今回は、Firebase Cloud Firestore のデータを削除します。

以前作成したコードは、こちらです。

pages フォルダ　 home.dart

dart
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:test_form2/services/firebase_service.dart';

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  FirebaseService? _firebaseService;

  @override
  void initState() {
    super.initState();
    _firebaseService = GetIt.instance.get<FirebaseService>();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: StreamBuilder(
          stream: _firebaseService!.getBooks(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              List books =
                  snapshot.data!.docs.map((doc) => doc.data()).toList();

              return ListView.builder(
                itemCount: books.length,
                itemBuilder: (BuildContext context, int index) {
                  Map book = books[index];
                  return Column(
                    children: [
                      Text(book['title'], style: TextStyle(fontSize: 24)),
                      Text(book['author'], style: TextStyle(fontSize: 18)),
                    ],
                  );
                },
              );
            } else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          },
        ),
      ),
    );
  }
}

services フォルダ　 firebase_service.dart

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

class FirebaseService {
  FirebaseAuth _auth = FirebaseAuth.instance;
  FirebaseFirestore _database = FirebaseFirestore.instance;

  FirebaseService();

  Future<bool> registerUser({
    required String email,
    required String password,
  }) async {
    try {
      UserCredential _userCredential = await _auth
          .createUserWithEmailAndPassword(email: email, password: password);
      return true;
    } catch (e) {
      print(e);
      return false;
    }
  }

  Future<bool> loginUser({
    required String email,
    required String password,
  }) async {
    try {
      UserCredential _userCredential = await _auth.signInWithEmailAndPassword(
          email: email, password: password);
      if (_userCredential.user != null) {
        return true;
      } else {
        return false;
      }
    } catch (e) {
      print(e);
      return false;
    }
  }

  Stream<QuerySnapshot> getBooks() {
    return _database
        .collection('books')
        .orderBy('timestamp', descending: true)
        .snapshots();
  }

  Future<bool> postBook({required String title, String? author}) async {
    try {
      await _database.collection('books').add(
        {
          'title': title,
          'author': author,
          'timestamp': Timestamp.now(),
        },
      );
      return true;
    } catch (e) {
      print(e);
      return false;
    }
  }
}

【Flutter】get_itとcloud_firestoreで、Firebaseのデータベースを実装する

まずは、Cloud Firestore のデータを削除するために、service フォルダの firebase_service.dart に deleteBook 関数を作成します。

dart
class FirebaseService {
  FirebaseAuth _auth = FirebaseAuth.instance;
  FirebaseFirestore _database = FirebaseFirestore.instance;

  FirebaseService();

  Future<bool> registerUser({
    required String email,
    required String password,
  }) async {
    try {
      UserCredential _userCredential = await _auth
          .createUserWithEmailAndPassword(email: email, password: password);
      return true;
    } catch (e) {
      print(e);
      return false;
    }
  }

  Future<bool> loginUser({
    required String email,
    required String password,
  }) async {
    try {
      UserCredential _userCredential = await _auth.signInWithEmailAndPassword(
          email: email, password: password);
      if (_userCredential.user != null) {
        return true;
      } else {
        return false;
      }
    } catch (e) {
      print(e);
      return false;
    }
  }

  Stream<QuerySnapshot> getBooks() {
    return _database
        .collection('books')
        .orderBy('timestamp', descending: true)
        .snapshots();
  }

  Future<bool> postBook({required String title, String? author}) async {
    try {
      await _database.collection('books').add(
        {
          'title': title,
          'author': author,
          'timestamp': Timestamp.now(),
        },
      );
      return true;
    } catch (e) {
      print(e);
      return false;
    }
  }

  Future<bool> deleteBook({required String docId}) async {
		try {

      return true;
    } catch (e) {
      print(e);
      return false;
    }
  }
}

Cloud Firestore のデータを削除するには、collectionとdocを指定し、deleteを設定します。

docの中にdocIdを指定します。

docIdは、削除ボタンを押した時に、docIdの値を受け取るようにします。

dart
Future<bool> deleteBook({required String docId}) async {
  try {
    await _database.collection('books').doc(docId).delete();
    return true;
  } catch (e) {
    print(e);
    return false;
  }
}

home.dart の books リストには、docId が入っていないので、doc.data()のオブジェクトに docId を追加します。

dart
child: StreamBuilder(
  stream: _firebaseService!.getBooks(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.hasData) {
      final List books = snapshot.data!.docs.map((doc) {
        Map value = doc.data();
        value['docId'] = doc.id;
        return value;
      }).toList();

削除ボタンの動作を設定するために、_deleteを作成します。

_fiebaseServiceのdeleteBookを指定します。

deleteBookには、docIdを指定しましょう。

dart
class _HomeState extends State<Home> {
  FirebaseService? _firebaseService;

  @override
  void initState() {
    super.initState();
    _firebaseService = GetIt.instance.get<FirebaseService>();
  }

  Future<void> _delete(dynamic docId) async {
    bool _result = await _firebaseService!.deleteBook(docId: docId);
    print('削除結果： $_result');
  }

削除ボタンを作成します。

onPressedに_deleteを設定します。

_deleteには、bookのdocIdを指定しましょう。

dart
children: [
  Text(book['title'], style: TextStyle(fontSize: 24)),
  Text(book['author'], style: TextStyle(fontSize: 18)),
  MaterialButton(
    onPressed: () => _delete(book['docId']),
    color: Colors.redAccent,
    child: const Text(
      '削除',
      style: TextStyle(
          color: Colors.white, fontWeight: FontWeight.bold),
    ),
  )
],