Cómo usar Firestore en Flutter para guardar y mostrar datos en tiempo real.

¿Te gustaría mostrar datos en tiempo real en tu app Flutter, sin necesidad de actualizar manualmente la pantalla? En este artículo aprenderás a integrar Cloud Firestore, la base de datos en tiempo real de Firebase, en tu aplicación Flutter. Con Firestore podrás guardar, leer y mostrar datos de forma instantánea y sincronizada, ideal para apps como chats, listas de tareas, productos, y mucho más.

¿Qué es Cloud Firestore?

Cloud Firestore es una base de datos NoSQL en la nube, desarrollada por Google. Está optimizada para el desarrollo de aplicaciones móviles y web. Su principal ventaja es que permite actualizar datos en tiempo real y sincronizarlos entre dispositivos sin esfuerzo.

🚀 Paso 1: Requisitos previos

  • Proyecto Flutter creado y funcionando

  • Firebase configurado e inicializado (puedes revisar nuestra guía anterior)

  • Conexión a Firebase con firebase_core

  • Conexión a Firestore con cloud_firestore

📦 Paso 2: Instalar el paquete cloud_firestore

En el archivo pubspec.yaml, agrega:

dependencies:
flutter:
sdk: flutter
firebase_core: ^2.25.0
cloud_firestore: ^4.14.0

Luego, ejecuta: flutter pub get

🧩 Paso 3: Inicializar Firebase en main.dart

Asegúrate de tener esta inicialización en tu main.dart:

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

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
}

🔥 Paso 4: Guardar datos en Firestore

Puedes guardar documentos de la siguiente manera:

import 'package:cloud_firestore/cloud_firestore.dart';

void guardarUsuario(String nombre, int edad) {
FirebaseFirestore.instance.collection('usuarios').add({
'nombre': nombre,
'edad': edad,
'fecha': FieldValue.serverTimestamp(),
});
}

🖼 Paso 5: Mostrar datos en tiempo real

Para mostrar los datos de una colección y actualizarlos automáticamente, puedes usar StreamBuilder:

StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance.collection('usuarios').orderBy('fecha').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return CircularProgressIndicator();
final usuarios = snapshot.data!.docs;
return ListView.builder(
itemCount: usuarios.length,
itemBuilder: (context, index) {
final usuario = usuarios[index];
return ListTile(
title: Text(usuario['nombre']),
subtitle: Text('Edad: ${usuario['edad']}'),
);
},
);
},
)

📌 Consejos adicionales

  • Siempre valida los datos antes de guardarlos.

  • Utiliza try-catch para manejar errores de escritura o lectura.

  • Usa FieldValue.serverTimestamp() para ordenar documentos por fecha correctamente.

  • Puedes aplicar filtros usando .where(), .limit(), etc.

🎉 Conclusión

¡Ya estás usando Firestore en Flutter! Ahora puedes construir aplicaciones dinámicas que reaccionen automáticamente a los cambios en la base de datos. Desde chats hasta dashboards en vivo, Firestore es ideal para apps modernas y conectadas.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Cómo gestionar el estado de autenticación y proteger las rutas de tu app Flutter

La gestión del estado de autenticación es esencial para asegurar que los usuarios puedan acceder solo a las partes de la aplicación que les correspondan. En Flutter, podemos gestionar el estado de autenticación y proteger las rutas mediante la integración de Firebase Authentication y una gestión eficiente del estado, lo que garantiza que las rutas de tu aplicación estén protegidas de forma dinámica según el estado de inicio de sesión del usuario. En este artículo, aprenderás cómo gestionar el estado de autenticación en tiempo real y cómo proteger las rutas de tu aplicación para que solo los usuarios autenticados puedan acceder a determinadas pantallas. 🚀 Paso 1: Integrar Firebase Auth en tu aplicación Si aún no has integrado Firebase en tu proyecto Flutter, asegúrate de tener las dependencias correctas en tu archivo pubspec.yaml : dependencies: firebase_core: ^2.25.0 firebase_auth: ^4.15.0 provider: ^6.0.3 Ejecuta: flutter pub get 🧩 Paso 2: Crear un servicio de aute...
Leer más

Cómo manejar notificaciones push avanzadas con Firebase Cloud Messaging y Flutter

Las notificaciones push son una de las formas más efectivas de interactuar con los usuarios, manteniéndolos informados y comprometidos incluso cuando no están usando activamente la aplicación. Firebase Cloud Messaging (FCM) es una herramienta poderosa para enviar notificaciones push a tus usuarios. En este artículo, exploraremos cómo manejar notificaciones push avanzadas en Flutter usando FCM, cubriendo características como notificaciones de datos, mensajes personalizados, y la gestión de notificaciones en segundo plano. 🚀 Paso 1: Recordatorio sobre la configuración básica de FCM en Flutter Antes de empezar con las notificaciones avanzadas, asegúrate de tener configurado FCM en tu proyecto Flutter. Si no lo has hecho aún, sigue los pasos de la configuración básica de FCM que cubrimos en artículos anteriores. Asegúrate de que las dependencias necesarias estén incluidas: dependencies: firebase_core: ^2.25.0 firebase_messaging: ^14.0.0 flutter_local_notifications: ^11.0.0 ...
Leer más