Recursos de aprendizaje de Flutter

Escuchar cambios en un TextField usando un callback.

Usa el paquete cloud_firestore para implementar capacidades multijugador en tu juego.

Implementa el soporte offline-first para una funcionalidad en una aplicación.

Aprende a usar el Widget Dismissible.

Mejora tu diseño y aprende a usar nuestro menú de fondo (backdrop) de componentes avanzados.

Enviar una solicitud HTTP PUT.

Una serie de ejemplos sencillos que demuestran cómo llamar a bibliotecas de C desde Dart.

Demuestra la sintaxis de los métodos de extensión de Dart.

Descubre cómo Material Components para Flutter facilitan la diferenciación de tu producto y expresan tu marca a través del diseño.

Aprende a recuperar el texto que un usuario ha ingresado en un campo de texto.

Usa el Widget Snackbar para mostrar mensajes a tus usuarios.

En esta receta, explora cómo crear y dar estilo a los campos de texto.

Aprende a usar HTTP en tu aplicación.

Simplifica la lógica del view model implementando una clase Command.

Modifica el archivo index.html de una aplicación de Flutter para que se inicie en un hostElement personalizado. Este es el ejemplo de integración más básico.

Crea una aplicación de chat para confirmación de asistencia (RSVP) a eventos y libro de visitas tanto en Android como en iOS usando Flutter, autenticando a los usuarios con Firebase Authentication y sincronizando datos usando Cloud Firestore.

Enviar solicitudes HTTP POST en tu aplicación.

Demuestra cómo llamar a las API de Flutter en el dispositivo basándose en la salida de la API de Gemini.

Aprende a usar la cámara de un dispositivo.

Los conceptos básicos de la simulación con el paquete Mockito.

Guarda los datos de la aplicación en el almacenamiento de clave-valor del dispositivo del usuario.

Reproducir videos almacenados en el sistema de archivos, como un recurso (asset) o desde Internet.

Una versión dirigida por un instructor de nuestro popular codelab 'Escribe tu primera aplicación de Flutter'.

Trabajar con pestañas es un patrón común en aplicaciones móviles que siguen las pautas de Material Design o Cupertino.

Usa el Widget Hero para animar un Widget de una pantalla a la siguiente.

Demuestra cómo transformar los formatos y las escalas de color de las imágenes.

Aprende a desarrollar una aplicación multiplataforma con Flutter y Firebase Cloud Messaging, integrando FCM para enviar y recibir mensajes en Android, iOS y la web.

Demuestra el plugin de Google Maps para Flutter.

Encabezados de autorización en HTTP

Un proyecto simple de fragment shaders en Flutter.

Demuestra cómo usar isolates de larga duración.

Una aplicación de muestra de Flutter que combina un UIViewController nativo de iOS con una vista de Flutter a pantalla completa.

Una introducción a la escritura de pruebas unitarias.

Una aplicación de muestra de Flutter que ejemplifica cómo implementar una pantalla de inicio animada para dispositivos Android.

Mejora el manejo de errores en las clases con objetos Result.

Una aplicación de línea de comandos que analiza las opciones de la línea de comandos y realiza consultas a GitHub.

Aprende a usar el paquete de animaciones de Material para agregar transiciones predefinidas a una aplicación de Material llamada Reply.

Crea un menú lateral (drawer) con contenido animado de forma escalonada y que tiene un botón que aparece en la parte inferior.

Usa el Widget Drawer en combinación con un Scaffold para crear un diseño con un menú lateral de Material Design.

Enviar una solicitud HTTP DELETE.

Este proyecto de muestra muestra una aplicación de Flutter que maximiza la reutilización del código de la aplicación mientras se adhiere a diferentes patrones de diseño en Android y iOS.

El Widget AnimatedOpacity facilita la realización de animaciones de opacidad.

Interactuar con Widgets en pruebas de Widgets.

Enfoques recomendados para agregar Flutter a aplicaciones existentes.

Escribir una prueba que registre una línea de tiempo de rendimiento.

Descubre las nuevas características de registros (records) y patrones (patterns) de Dart 3. Aprende cómo puedes usarlas en una aplicación de Flutter para ayudarte a escribir código de Dart más legible y mantenible.

Usa AnimatedContainer para animar el tamaño, el color de fondo y el radio del borde de un Container.

Usa el paquete games_services para agregar la funcionalidad de tabla de clasificación a tu juego móvil.

Este codelab se centra en la creación de juegos de rompecabezas de palabras, y se adentra en el uso del procesamiento en segundo plano de Flutter para generar cuadrículas extensas de palabras entrelazadas al estilo de un crucigrama.

Guarda datos complejos de la aplicación en el dispositivo del usuario con SQL.

Configurar enlaces profundos (deep linking) en Android

Esta receta examina la constante 'find' proporcionada por el paquete flutter_test.

Aprende a agregar un Widget de pantalla de inicio a tu aplicación de Flutter en iOS. Esto se aplica a tu pantalla de inicio, pantalla de bloqueo o a la vista de hoy.

Usa el Widget FadeInImage para mostrar un marcador de posición visual antes de que se cargue una imagen.

Para compartir estilos en toda tu aplicación, usa Themes.

Mejora la percepción de capacidad de respuesta de una aplicación implementando un State optimista.

Crea una lista que muestre dos columnas en modo retrato y tres columnas en modo horizontal.

Usa el paquete sqflite.

Usa el Widget InkWell para mostrar una animación de ondas.

Crea una lista con espaciado (padding) entre los elementos.

Una aplicación de muestra de Flutter que demuestra cómo usar `MethodChannel`, `EventChannel`, `BasicMessageChannel` y `MessageCodec`.

Crea rutas nombradas y navega hacia ellas.

Aprende a agregar un banner de AdMob, un anuncio intersticial, y un anuncio bonificado a una aplicación llamada Awesome Drawing Quiz, un juego que permite a los jugadores adivinar el nombre del dibujo.

Configurar Universal Links para iOS

Una aplicación de muestra que enseña diferentes tipos de pruebas en Flutter.

Aprende a implementar banners insertados y anuncios nativos en una aplicación de reserva de viajes que muestra posibles destinos de vuelo.

Aprende a usar los objetos Isolate de Dart

Reportar errores al servicio de reporte de fallos Sentry.

Aplicaciones de línea de comandos que demuestran cómo trabajar con concurrencia en Dart usando isolates.

Crea un botón de acción flotante (floating action button) que despliegue otros botones de acción.

Construye un clon de Breakout usando el motor de juegos Flame 2D e intégralo en un contenedor (wrapper) de Flutter.

Devolver datos de una pantalla a otra con el método Navigator.pop.

Demuestra las mejores prácticas para publicar paquetes en pub.dev.

Extiende una aplicación de juego sencilla que utiliza la mascota Dash como moneda para ofrecer tres tipos de compras dentro de la aplicación: consumibles, no consumibles y suscripciones.

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

Aprende a crear efectos animados en Flutter. Aprenderás a construir animaciones implícitas y explícitas, y a personalizar las animaciones de transición de navegación, el paquete de animaciones y el gesto de retroceso predictivo (predictive back) en Android.

Colocar una barra de aplicaciones (app bar) o barra de navegación flotante encima de una lista.

Una muestra que enseña cómo usar la API `go_router` para manejar escenarios comunes de navegación.

Un proyecto de muestra que demuestra la integración con iOS App Clip.

Muestra un mapa de Google en una aplicación, recupera datos de un servicio web y muestra los datos como marcadores en el mapa.

Aprende a mover un Widget desde un punto arrastrado de regreso al centro usando una simulación de resorte.

Aprende los conceptos básicos del uso de Material Components construyendo una aplicación sencilla con componentes esenciales.

Aprende a hacer scroll en las pruebas de Widgets.

Con el plugin WebView para Flutter puedes agregar un Widget WebView a tu aplicación de Flutter para Android o iOS.

Aprende a verificar la orientación de la aplicación en pruebas de Widgets.

Crea una lista con encabezados seguidos de algunos elementos de lista.

Instrucciones paso a paso sobre cómo depurar problemas comunes de diseño utilizando el Flutter Inspector y el Layout Explorer.

Usa el Widget GestureDetector para responder a acciones fundamentales, como tocar y arrastrar.

Aprende a mostrar elementos horizontalmente en una lista con scroll.

Conectarse y comunicarse con un WebSocket.

Enviar datos de una pantalla a una nueva.

Esta receta usa el Navigator para navegar a una nueva ruta.

Construye un botón de descarga que transicione a través de múltiples estados visuales, según el estado de la descarga de una aplicación.

Ejemplos de ejecución de Dart en el servidor.

Crea el efecto parallax construyendo una lista de tarjetas con imágenes que "se mueven".

Demuestra características de escritorio tanto en el sistema de diseño Material como en FluentUI.

Una muestra para desarrolladores escrita en Flutter que demuestra cómo interactuar con una lista de tareas pendientes en lenguaje natural usando la API de Gemini.

Aprende a agregar validación a un formulario.

Una introducción a la escritura de pruebas de Widgets.

Trabaja con listas más largas utilizando el constructor ListView.builder.

Aprende a agregar autenticación de Firebase a una aplicación de Flutter con solo unas pocas líneas de código.

Usa el paquete google_mobile_ads para agregar un anuncio de banner a tu aplicación o juego.

Una aplicación de línea de comandos que se puede compilar a código nativo usando `dart compile exe`.

Comunica que los datos se están cargando con un brillo (shimmer) de color cromo en la pantalla.

Cambiar el foco a un campo de texto mediante programación.

Aprende a mostrar elementos con el Widget ListView.

Una aplicación Angular simple (y componente) que replica el ejemplo de integración de elementos, pero en una aplicación Angular.

Persistir datos con shared_preferences

Crea rutas de nivel superior y rutas anidadas debajo de Widgets específicos.

Usa la biblioteca dart:io y el plugin path_provider para guardar archivos en el disco.

Usa una fuente en múltiples aplicaciones.

Pasa argumentos a una ruta nombrada y lee los argumentos en esa ruta.

Para trabajar con imágenes desde una URL, usa el constructor Image.network().

Construye una interacción de arrastrar y soltar (drag-and-drop) cuando el usuario mantiene presionado.

Crea una aplicación simple generadora de nombres aleatorios. Esta aplicación es adaptable (responsive) y se ejecuta en dispositivos móviles, de escritorio y en la web.

Transiciona entre rutas animando la nueva ruta para que entre a la vista desde la parte inferior de la pantalla.

Una muestra que enseña diferentes tipos de formularios y mejores prácticas.

Aplica fuentes a toda tu aplicación o a Widgets individuales.

Aprende a usar un Widget GridView.