Presentación del Curso

Curso práctico de Flutter y Dart enfocado en aprendizaje directo mediante desarrollo en vivo de un proyecto real. Los estudiantes siguen el código en sus equipos con teoría mínima. Se crea una app de gestión o inventario con autenticación, CRUD y Firebase Firestore. Al finalizar, cada participante contará con una aplicación funcional instalada.

Contenido:

1. Entorno y primeros pasos
2. Widgets y Layout
3. Listas y Datos Locales
4. Navegación y Formularios
5. Asincróno y Firebase Setup
6. Autenticacion con Firebase Auth
7. CREATE y READ en Firestore
8. UPDATE y DELETE
9. UX y Carga de Datos
10. Imágenes con Firebase Storage
11. Limpieza de Código y APK
12. Presentación y Cierre del Curso

Duración Total: 3 meses
Clases por semana: 2 sesiones
Duración por clase: 2 Horas
Total de sesiones: 24 sesiones
Total de horas: 48 horas
Formato: Teoría breve + Proyecto en vivo

Como está organizado el tiempo en cada clase:

Actividad

Tiempo

Que ocurre

Repaso rápido

10 min

Se retoma el tema anterior. El docente pregunta, resuelve dudas pendientes.

Teoría necesaria

20-25 min

Solo lo que se necesita saber para entender el Código de la sesión. Sin diapositivas largas.

Desarrollo en vivo

70-75 min

El docente codifica en pantalla. Los alumnos replican en sus equipos. Se avanza el proyecto.

Cierre

10 min

Resumen de lo que se hizo. Se adelanta lo que viene en la siguiente sesión.

Notas importantes:
– El proyecto se construye de forma incremental: cada sesión agrega algo visible y funcional.
– Si el grupo se atrasa, es mejor consolidar lo actual que avanzar temas nuevos sin base.
– Tener snippets listos para Firebase setup y StreamBuilder ahorra tiempo de escritura en vivo.
– Compartir el repositorio al final de cada clase para que los alumnos tengan el Código actualizado.
– Las sesiones 1 y 9 son críticas: instalación y conexión Firebase. Reservar tiempo extra para problemas técnicos.

MES 1 — Bases de Dart y Flutter

Objetivo del mes: que el alumno entienda como funciona Dart, conozca los widgets fundamentales de Flutter y pueda construir pantallas simples con navegación. Toda la teoría se da de forma aplicada: se explica el concepto y de inmediato se usa en código.

📆 SEMANA 1 — Entorno y primeros pasos

Sem.

Ses.

Tema

Descripción

Lo que ve el alumno

Instalacion y primer proyecto

Se instala Flutter SDK, VS Code y el emulador. Se crea el primer proyecto con flutter create y se analiza la estructura de carpetas. Se explica brevemente que es Flutter y por que Dart.

App default corriendo en el emulador. Hot reload en acción.

Dart esencial: variables, tipos y funciones

Solo lo necesario de Dart para escribir Flutter: var, String, int, bool, null safety basico con ? y !. Funciones con parametros nombrados. Se practica directo en el archivo main.dart.

Funciones propias llamadas desde el boton de la app default.

📆 SEMANA 2 — Widgets y Layout

Sem.

Ses.

Tema

Descripción

Lo que ve el alumno

Widgets fundamentales

Se explica el concepto de widget y el arbol de widgets. Se usan: Text, Container, Icon, Image.asset, ElevatedButton. Se habla de StatelessWidget como punto de partida.

Pantalla de bienvenida construida desde cero con varios widgets.

Layout: Column, Row y Scaffold

Como organizar elementos en pantalla con Column y Row. MainAxisAlignment y CrossAxisAlignment. Padding, SizedBox y Expanded para espaciado. AppBar y FloatingActionButton.

Tarjeta de perfil de usuario con foto, nombre y boton.

📆 SEMANA 3 — Listas y Datos Locales

Sem.

Ses.

Tema

Descripción

Lo que ve el alumno

Listas y ListView

Listas en Dart: List<T>, .map(), .where(). ListView.builder para mostrar colecciones. Se crea un modelo simple en Dart (clase con propiedades). Primer vistazo a StatefulWidget.

Lista de 10 items construida desde una lista Dart local.

StatefulWidget y setState

Diferencia entre Stateless y Stateful. El ciclo de vida básico. setState para actualizar la UI. Se agrega lógica de eliminar y marcar items en la lista.

Lista interactiva: se pueden tachar y eliminar items.

📆 SEMANA 4 — Navegación y Formularios

Sem.

Ses.

Tema

Descripción

Lo que ve el alumno

Navegación entre pantallas

Navigator.push y Navigator.pop. Pasar datos entre pantallas con argumentos. Crear rutas nombradas en MaterialApp. Se agrega una pantalla de detalle al proyecto.

App con pantalla principal y pantalla de detalle funcional.

Formularios y validación básica

TextFormField, Form y GlobalKey. Validación de campos vacios. onSaved y onChanged. Este formulario será el que usaremos para crear items en Firebase mas adelante.

Formulario de crear item con validación. Datos se muestran en consola.

MES 2 — Async, Estado y Conexión a Firebase

Objetivo del mes: conectar la app a Firebase, implementar autenticación y comenzar el CRUD real. Se introduce la programación asíncrona solo cuando es necesaria para Firebase. El proyecto toma forma concreta.

📆 SEMANA 5 — Asincrono y Firebase Setup

Sem.

Ses.

Tema

Descripción

Lo que ve el alumno

async / await y Future

Por que existe el código asíncrono. Future<T> explicado con un ejemplo simple. async y await de forma practica. try/catch para manejar errores. Solo lo necesario para usar Firebase.

Función asíncrona que simula carga de datos con Future.delayed.

Conectar Firebase al proyecto

Crear app en Firebase Console. Instalar firebase_core y cloud_firestore. Agregar google-services.json. Inicializar Firebase en main.dart. Verificar conexión escribiendo un documento de prueba.

Primer documento escrito en Firestore desde la app en vivo.

📆 SEMANA 6 — Autenticación con Firebase Auth

Sem.

Ses.

Tema

Descripción

Lo que ve el alumno

Instalar firebase_auth. Pantalla de Login y Registro con los formularios del mes anterior. signInWithEmailAndPassword y createUserWithEmailAndPassword. Manejo del error de credenciales.

Persistencia de sesión y Logout

authStateChanges como Stream para saber si hay sesion activa. Redirigir al usuario según su estado: si esta logueado va al Home, si no va al Login. signOut.

La app recuerda la sesión aunque se cierre. Logout funcional.

📆 SEMANA 7 — CREATE y READ en Firestore

Sem.

Ses.

Tema

Descripción

Lo que ve el alumno

CREATE: guardar datos en Firestore

collection().add() para crear documentos. Guardar el formulario de creación en Firestore. Agregar el uid del usuario al documento. Mostrar SnackBar de exito o error.

El formulario ya guarda datos reales en Firestore.

READ: leer datos en tiempo real

StreamBuilder conectado a collection().snapshots(). Mapear DocumentSnapshot al modelo Dart. Mostrar los datos del usuario autenticado con where(‘uid’). La lista se actualiza sola.

La lista principal muestra datos de Firestore en tiempo real.

📆 SEMANA 8 — UPDATE y DELETE

Sem.

Ses.

Tema

Descripción

Lo que ve el alumno

UPDATE: editar documentos

Pantalla de edición que recibe el documento existente y lo pre-llena en el formulario. doc(id).update() para guardar cambios. Patron de navegacion: lista → edición → regreso con datos.

Edición de un item existente guardada en Firestore.

DELETE: eliminar con confirmación

AlertDialog de confirmación antes de borrar. doc(id).delete(). Widget Dismissible para swipe-to-delete. CRUD completo funcionando: Crear, Leer, Editar y Eliminar.

CRUD 100% funcional sobre Firestore. App ya es usable.

MES 3 — Pulido, imágenes y Entrega Final

Objetivo del mes: mejorar la experiencia de usuario, agregar subida de imágenes, limpiar el código y dejar la app lista para mostrarse. Las ultimas dos sesiones son de presentación y cierre del curso.

📆 SEMANA 9 — UX y Carga de Datos

Sem.

Ses.

Tema

Descripción

Lo que ve el alumno

Loading states y manejo de errores

CircularProgressIndicator mientras carga Firestore. Pantalla de empty state cuando no hay datos. Mensajes de error amigables con SnackBar. La app ya no queda en blanco ni congela.

App con estados de carga, vacío y error visibles.

Busqueda y filtros simples

SearchBar que filtra la lista en memoria con .where(). Filtro por estado o categoría usando chips. No se necesitan índices compuestos para este nivel.

Barra de búsqueda funcionando sobre la lista de items.

📆 SEMANA 10 — Imágenes con Firebase Storage

Sem.

Ses.

Tema

Descripción

Lo que ve el alumno

Seleccionar y subir imágenes

Instalar image_picker y firebase_storage. Seleccionar imagen de la galería. Subir a Storage y obtener la URL de descarga. Guardar la URL en el documento de Firestore.

El formulario permite adjuntar una foto al item.

Mostrar imágenes y pulido visual

Mostrar imagen desde URL con Image.network y placeholder de carga. Ajustar tamaños, bordes y sombras. Revisar que la lista y el detalle se vean consistentes.

App con imágenes cargando correctamente en la lista y el detalle.

📆 SEMANA 11 — Limpieza de Código y APK

Sem.

Ses.

Tema

Descripción

Lo que ve el alumno

Refactor y organización del proyecto

Separar la lógica de Firebase en clases de servicio (AuthService, ItemService). Crear un archivo de constantes para colores y rutas. El código queda mas legible y fácil de mantener.

Proyecto reorganizado en carpetas: screens, services, models.

Icono, splash screen y generación del APK

Cambiar el icono de la app con flutter_launcher_icons. Configurar el splash screen. Generar el APK con flutter build apk –release. Instalar en el dispositivo físico.

APK instalado en el teléfono del alumno. App funcionando offline en el dispositivo.

📆 SEMANA 12 — Presentación y Cierre del Curso

Sem.

Ses.

Tema

Descripción

Lo que ve el alumno

Sesión de repaso y ajustes finales

Cada alumno prueba su app e identifica lo que falta o esta roto. El docente recorre los proyectos y ayuda a corregir los últimos detalles. Reglas de seguridad básicas en Firestore.

App de cada alumno lista para presentar.

Presentación final y cierre

Cada alumno hace una demo de su app mostrando el CRUD completo. El docente da retroalimentación. Se comparte la hoja de ruta para continuar al nivel intermedio: BLoC, Riverpod, Clean Architecture.

Demo en vivo del CRUD. Certificado de finalización. Cierre del curso.

Resumen del Curso

Mes

Semanas

Enfoque

Resultado al terminar

Mes 1

1 – 4

Dart básico + Widgets + Navegación + Formularios

App de 2-3 pantallas con lista interactiva y formulario validado

Mes 2

5 – 8

Firebase Auth + Firestore CRUD completo

CRUD real con login, sesión persistente y datos en Firestore

Mes 3

9 – 12

UX + Storage + Refactor + APK + Presentación

App completa instalada en dispositivo físico, lista para portafolio

Tecnologías y dependencias que se instalan en el curso

Herramientas • Flutter SDK + Dart • VS Code o Android Studio • Emulador Android o dispositivo físico • Git y GitHub (básico) • Cuenta Google para Firebase