Flutter と Firebase Firestore を使ったリアルタイムデータの保存・同期【初心者向け】

dependencies:
  firebase_core: ^3.6.0
  cloud_firestore: ^5.4.4

flutter pub get

import 'package:cloud_firestore/cloud_firestore.dart';

  Future<void> addTodoItem(String task) async {
    await FirebaseFirestore.instance.collection('todos').add({
      'task': task,
      'created_at': Timestamp.now(),
      'is_completed': false,
    });
  }

  // タスクの更新（Update）
  Future<void> updateTodoItem(String id, bool isCompleted) async {
    await FirebaseFirestore.instance.collection('todos').doc(id).update({
      'is_completed': isCompleted,
    });
  }

  // タスクの削除（Delete）
  Future<void> deleteTodoItem(String id) async {
    await FirebaseFirestore.instance.collection('todos').doc(id).delete();
  }

// Firestoreからタスクのリストを取得（Read）
  Widget buildTodoList() {
    return StreamBuilder(
      stream: FirebaseFirestore.instance.collection('todos').orderBy('created_at').snapshots(),
      builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (!snapshot.hasData) {
          return Center(child: CircularProgressIndicator());
        }
        var todos = snapshot.data!.docs;
        return ListView.builder(
          itemCount: todos.length,
          itemBuilder: (context, index) {
            var todo = todos[index];
            return ListTile(
              title: Text(todo['task']),
              trailing: Checkbox(
                value: todo['is_completed'],
                onChanged: (value) {
                  updateTodoItem(todo.id, value!);  // タスクの更新（Update）
                },
              ),
              onLongPress: () {
                deleteTodoItem(todo.id);  // タスクの削除（Delete）
              },
            );
          },
        );
      },
    );
  }

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(); // Firebase初期化
  runApp(TodoApp());
}

class TodoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firestore Todo App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TodoListScreen(),
    );
  }
}

class TodoListScreen extends StatefulWidget {
  @override
  _TodoListScreenState createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
  // タスクの追加（Create）
  Future<void> addTodoItem(String task) async {
    await FirebaseFirestore.instance.collection('todos').add({
      'task': task,
      'created_at': Timestamp.now(),
      'is_completed': false,
    });
  }

  // タスクの更新（Update）
  Future<void> updateTodoItem(String id, bool isCompleted) async {
    await FirebaseFirestore.instance.collection('todos').doc(id).update({
      'is_completed': isCompleted,
    });
  }

  // タスクの削除（Delete）
  Future<void> deleteTodoItem(String id) async {
    await FirebaseFirestore.instance.collection('todos').doc(id).delete();
  }

  // Firestoreからタスクのリストを取得（Read）
  Widget buildTodoList() {
    return StreamBuilder(
      stream: FirebaseFirestore.instance.collection('todos').orderBy('created_at').snapshots(),
      builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (!snapshot.hasData) {
          return Center(child: CircularProgressIndicator());
        }
        var todos = snapshot.data!.docs;
        return ListView.builder(
          itemCount: todos.length,
          itemBuilder: (context, index) {
            var todo = todos[index];
            return ListTile(
              title: Text(todo['task']),
              trailing: Checkbox(
                value: todo['is_completed'],
                onChanged: (value) {
                  updateTodoItem(todo.id, value!);  // タスクの更新（Update）
                },
              ),
              onLongPress: () {
                deleteTodoItem(todo.id);  // タスクの削除（Delete）
              },
            );
          },
        );
      },
    );
  }

  // モーダルを表示してタスクを追加
  void _showAddTodoDialog() {
    TextEditingController _taskController = TextEditingController();

    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('Add a new task'),
          content: TextField(
            controller: _taskController,
            decoration: InputDecoration(hintText: 'Enter task here'),
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();  // モーダルを閉じる
              },
              child: Text('Cancel'),
            ),
            TextButton(
              onPressed: () {
                if (_taskController.text.isNotEmpty) {
                  addTodoItem(_taskController.text);  // タスクを追加
                  Navigator.of(context).pop();  // モーダルを閉じる
                }
              },
              child: Text('Add'),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firestore Todo List')),
      body: buildTodoList(),  // タスクのリスト表示
      floatingActionButton: FloatingActionButton(
        onPressed: _showAddTodoDialog,  // モーダルを表示してタスクを追加
        child: Icon(Icons.add),
      ),
    );
  }
}