Salvare dati nel cloud con Cloud Firestore in Flutter

Per prima cosa crea un progetto su Firebase Console e abilita Cloud Firestore in modalità test (per lo sviluppo).

Installa la CLI di Firebase e FlutterFire CLI, quindi collega il progetto:

dart pub global activate flutterfire_cli
flutterfire configure

Questo comando genera il file firebase_options.dart. Aggiungi infine le dipendenze al pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.27.0
  cloud_firestore: ^4.15.0

Prima di usare Firestore dobbiamo inizializzare Firebase nel metodo main. Ricordati di rendere main asincrono e di chiamare WidgetsFlutterBinding.ensureInitialized().

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

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firestore Tasks',
      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.indigo),
      home: const TasksPage(),
    );
  }
}

Per mantenere il codice pulito incapsuliamo le operazioni su Firestore in una classe TaskService. Lavoreremo su una collection chiamata tasks, dove ogni documento ha i campi title (testo) e done (booleano).

import 'package:cloud_firestore/cloud_firestore.dart';

class TaskService {
  final _collection = FirebaseFirestore.instance.collection('tasks');

  // Stream in tempo reale ordinato per data di creazione
  Stream<QuerySnapshot<Map<String, dynamic>>> watchTasks() {
    return _collection.orderBy('createdAt', descending: true).snapshots();
  }

  Future<void> addTask(String title) {
    return _collection.add({
      'title': title,
      'done': false,
      'createdAt': FieldValue.serverTimestamp(),
    });
  }

  Future<void> toggleDone(String id, bool done) {
    return _collection.doc(id).update({'done': done});
  }

  Future<void> deleteTask(String id) {
    return _collection.doc(id).delete();
  }
}

Usiamo uno StreamBuilder collegato al metodo watchTasks(). Ogni volta che un documento cambia su Firestore, la UI si aggiorna automaticamente senza dover ricaricare la pagina.

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

  @override
  Widget build(BuildContext context) {
    final service = TaskService();
    return Scaffold(
      appBar: AppBar(title: const Text('Le mie attività')),
      body: StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
        stream: service.watchTasks(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return const Center(child: Text('Errore nel caricamento'));
          }
          if (!snapshot.hasData) {
            return const Center(child: CircularProgressIndicator());
          }
          final docs = snapshot.data!.docs;
          if (docs.isEmpty) {
            return const Center(child: Text('Nessuna attività'));
          }
          return ListView.builder(
            itemCount: docs.length,
            itemBuilder: (context, index) {
              final doc = docs[index];
              final data = doc.data();
              return CheckboxListTile(
                title: Text(data['title'] ?? ''),
                value: data['done'] ?? false,
                onChanged: (v) => service.toggleDone(doc.id, v ?? false),
                secondary: IconButton(
                  icon: const Icon(Icons.delete_outline),
                  onPressed: () => service.deleteTask(doc.id),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

Aggiungiamo un FloatingActionButton che apre un dialog per inserire il titolo di un nuovo task. Al salvataggio chiamiamo addTask, e grazie allo stream la lista si aggiorna da sola.

// Aggiungi questo al Scaffold della TasksPage
floatingActionButton: FloatingActionButton(
  onPressed: () => _showAddDialog(context, service),
  child: const Icon(Icons.add),
),

// Metodo helper
Future<void> _showAddDialog(BuildContext context, TaskService service) async {
  final controller = TextEditingController();
  await showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text('Nuova attività'),
      content: TextField(
        controller: controller,
        autofocus: true,
        decoration: const InputDecoration(hintText: 'Cosa devi fare?'),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('Annulla'),
        ),
        FilledButton(
          onPressed: () {
            final text = controller.text.trim();
            if (text.isNotEmpty) {
              service.addTask(text);
            }
            Navigator.pop(context);
          },
          child: const Text('Salva'),
        ),
      ],
    ),
  );
}

La modalità test scade dopo 30 giorni e lascia il database aperto a tutti. Prima di andare in produzione devi impostare regole di sicurezza adeguate. Se la tua app usa l'autenticazione, limita l'accesso agli utenti loggati.

Nel tab Rules della console Firestore inserisci ad esempio:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /tasks/{document} {
      // Consenti la lettura/scrittura solo a utenti autenticati
      allow read, write: if request.auth != null;
    }
  }
}