Cloud Firestore CRUD in Flutter - Mini App: Build & Ship

Build: Simple Firestore Todo

A screen to add, read, update, and delete todo items stored in Cloud Firestore.

Target UI

Simple Firestore Todo

+-----------------------------+
| Add Todo: [__________] [+]  |
+-----------------------------+
| Todos:                      |
| 1. Buy groceries   [Edit][X]|
| 2. Walk the dog    [Edit][X]|
|                             |
+-----------------------------+

TextField to enter a new todo item

Add button to save the new todo to Firestore

List of todos fetched live from Firestore

Each todo shows text with Edit and Delete buttons

Edit button allows changing the todo text inline

Delete button removes the todo from Firestore

Starter Code

Flutter

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

class SimpleFirestoreTodo extends StatefulWidget {
  @override
  State<SimpleFirestoreTodo> createState() => _SimpleFirestoreTodoState();
}

class _SimpleFirestoreTodoState extends State<SimpleFirestoreTodo> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Firestore Todo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Add Todo'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    // TODO: Add new todo to Firestore
                  },
                ),
              ],
            ),
            Expanded(
              child: StreamBuilder<QuerySnapshot>(
                stream: FirebaseFirestore.instance.collection('todos').snapshots(),
                builder: (context, snapshot) {
                  if (!snapshot.hasData) return CircularProgressIndicator();
                  final docs = snapshot.data!.docs;
                  return ListView.builder(
                    itemCount: docs.length,
                    itemBuilder: (context, index) {
                      final doc = docs[index];
                      final todoText = doc['text'];
                      return ListTile(
                        title: Text(todoText),
                        trailing: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            IconButton(
                              icon: Icon(Icons.edit),
                              onPressed: () {
                                // TODO: Edit todo text
                              },
                            ),
                            IconButton(
                              icon: Icon(Icons.delete),
                              onPressed: () {
                                // TODO: Delete todo
                              },
                            ),
                          ],
                        ),
                      );
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

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

class SimpleFirestoreTodo extends StatefulWidget {
  @override
  State<SimpleFirestoreTodo> createState() => _SimpleFirestoreTodoState();
}

class _SimpleFirestoreTodoState extends State<SimpleFirestoreTodo> {
  final TextEditingController _controller = TextEditingController();

  void _addTodo() async {
    final text = _controller.text.trim();
    if (text.isEmpty) return;
    await FirebaseFirestore.instance.collection('todos').add({'text': text});
    _controller.clear();
  }

  void _deleteTodo(String id) async {
    await FirebaseFirestore.instance.collection('todos').doc(id).delete();
  }

  void _editTodoDialog(String id, String currentText) {
    final editController = TextEditingController(text: currentText);
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('Edit Todo'),
        content: TextField(
          controller: editController,
          autofocus: true,
          decoration: InputDecoration(hintText: 'Todo text'),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Cancel'),
          ),
          TextButton(
            onPressed: () async {
              final newText = editController.text.trim();
              if (newText.isNotEmpty) {
                await FirebaseFirestore.instance.collection('todos').doc(id).update({'text': newText});
              }
              Navigator.pop(context);
            },
            child: Text('Save'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Firestore Todo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Add Todo'),
                    onSubmitted: (_) => _addTodo(),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: _addTodo,
                  tooltip: 'Add todo',
                ),
              ],
            ),
            Expanded(
              child: StreamBuilder<QuerySnapshot>(
                stream: FirebaseFirestore.instance.collection('todos').snapshots(),
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return Center(child: CircularProgressIndicator());
                  }
                  if (!snapshot.hasData || snapshot.data!.docs.isEmpty) {
                    return Center(child: Text('No todos yet'));
                  }
                  final docs = snapshot.data!.docs;
                  return ListView.builder(
                    itemCount: docs.length,
                    itemBuilder: (context, index) {
                      final doc = docs[index];
                      final todoText = doc['text'] ?? '';
                      return ListTile(
                        title: Text(todoText),
                        trailing: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            IconButton(
                              icon: Icon(Icons.edit),
                              tooltip: 'Edit todo',
                              onPressed: () => _editTodoDialog(doc.id, todoText),
                            ),
                            IconButton(
                              icon: Icon(Icons.delete),
                              tooltip: 'Delete todo',
                              onPressed: () => _deleteTodo(doc.id),
                            ),
                          ],
                        ),
                      );
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This app uses Cloud Firestore to store todo items in a collection called 'todos'.

The _addTodo method adds a new document with the todo text. It clears the input after adding.

The _deleteTodo method deletes a document by its ID.

The _editTodoDialog shows a dialog with a TextField to update the todo text. On save, it updates the Firestore document.

The UI listens to live updates from Firestore using StreamBuilder and shows the list of todos. Each todo has Edit and Delete buttons.

This approach keeps the UI in sync with the database automatically.

Final Result

Completed Screen

Simple Firestore Todo

+-----------------------------+
| Add Todo: [Buy milk  ] [+] |
+-----------------------------+
| Todos:                      |
| 1. Buy groceries   [Edit][X]|
| 2. Walk the dog    [Edit][X]|
| 3. Buy milk        [Edit][X]|
+-----------------------------+

User types a todo in the text field and taps '+' to add it to Firestore.

The new todo appears instantly in the list below.

Tapping 'Edit' opens a dialog to change the todo text and save it.

Tapping 'X' deletes the todo from Firestore and removes it from the list.

Stretch Goal

Add a pull-to-refresh gesture to reload the todo list manually.

💡 Hint

Wrap the ListView with a RefreshIndicator widget and call setState or reload the Firestore stream on refresh.