備忘録07 Flutter firebase 参照方法 リアルタイム編

概要

flutterのfirebaseからの参照方法にリアルタイムで取得する方法があったので
記録する。

Stream

自分がリアルタイムでfirebaseからデータを取得するときにStreamBuilderを使った。
サンプルコードを以下に残す。

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

class ListPage extends StatelessWidget {
  const ListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User List'),
      ),
      body: StreamBuilder<QuerySnapshot>(
        // ここでfirebaseからリアルタイムでデータを取得する。ポイントはsnapshots()
        stream:
            FirebaseFirestore.instance.collection('collections').snapshots(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return const Center(child: Text('エラーが発生しました'));
          } else if (!snapshot.hasData || snapshot.data!.docs.isEmpty) {
            return const Center(child: Text('データがありません。'));
          } else {
            final data = snapshot.data!.docs;
            return ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, index) {
                final document = data[index];
                return ListTile(
                  title: Text(document['column1']),
                );
              },
            );
          }
        },
      ),
    );
  }
}

直接firebaseの方でデータを削除したらリアルタイムで確認することができた。