Codelabs

Layout básicos en Flutter

Usa DartPad en el navegador (no necesitas descargar Flutter o Dart!) para aprender lo básico de la creación de layouts en Flutter.

Escribe tu primera app en Flutter, parte 1

Crea una app sencilla que genera nombres propuestos para una compañia startup. En la primera parte, utilizarás un paquete que regresa pares de palabras aleatorios y las agregarás a una lista de scroll infinito.

Escribe tu primera app en Flutter, parte 2

Crea una app sencilla que genera nombres propuestos para una compañia startup. En la segunda parte, extenderás el ejemplo desde la primera parte para permitir al usuario seleccionar los pares de palabras favoritos y añadir una segunda pantalla “Favoritos guardados”. donde los usuarios pueden ver los nombres seleccionados. Finalmente, cambiarás el color del tema de la aplicación.

Construyendo interfaces de usuario hermosas con Flutter

Una “primera incursión” más profunda que “Escribe tu primera app en Flutter.” En este codelab crearás una aplicación de chat que incluye una simple animación y personalizarás la interfaz de usuario para iOS y Android.

Añadir Google Maps a una app Flutter

Muestra un mapa de Google en una app, obtén datos desde un web service, y muestra los datos como marcadores en el mapa.

Construye una app para compartir fotos con Google Photos y Flutter

Construye una app para viajes, que te permita a ti y a otros miembros del viaje compartir fotos.

Construye una app Cupertino con Flutter

Construye una versión de la app de compras Shrine (usada en el codelab de Material Design) usando el paquete Cupertino para crear un iOS style look and feel. Crea múltiples pestaás y navega entre ellas. Usa el paquete provider para manejar el estado entre las pantallas.

Firebase para Flutter

Conecta una aplicación Flutter a una base de datos Firebase, y cómo usar una transacción para actualizar la información compartida.

MDC 101 Flutter: Material Components (MDC) Básicos

Aprende los conceptos básicos del uso de Material Components por medio de la construcción de una aplicación simple con los componentes principales. Los cuatro codelabs MDC te guiará a través de la creación de una aplicación de comercio electrónico llamada Shrine. Comenzarás por construir una página de inicio de sesión utilizando varios de los Componentes MDC de Flutter.

MDC 102 Flutter: Estructura de Material y diseño

Aprende a utilizar Material para la estructura y el diseño en Flutter. Continuar construyendo la aplicación de comercio electrónico, introducida en el MDC-101, añadiendo navegación, estructura y datos.

MDC 103 Flutter: Temas Material con Color, Forma, Elevación y Tipo

Descubre cómo los Componentes de Material para Flutter facilitan la diferenciación de tu producto y expresan tu marca a través del diseño. Continúa construyendo tu aplicación de comercio electrónico añadiendo una pantalla de inicio que muestre los productos.

MDC 104 Flutter: Componentes Avanzados Material

Mejora tu diseño y aprende a usar nuestro menú de componentes avanzados. Termina tu aplicación de comercio electrónico añadiendo un fondo con un menú que filtra los productos por la categoría seleccionada.


Para una lista completa de los codelabs disponibles para Flutter, vea la categoria de Flutter en Google Developers. Si el enlace anterior no funciona para ti, intenta este otro enlace para codelabs de Flutter.

Para codelabs especificos de Dart, ve la página codelabs en dartlang.org.