Construir una aplicación web con Flutter

Esta página proporciona una descripción general de cómo configurar, ejecutar y compilar una aplicación web con Flutter.

Antes de que puedas compilar una aplicación web con Flutter, asegúrate de tener instalado el Flutter SDK y un navegador web. Visita las instrucciones de Configurar el desarrollo web para Flutter para obtener más detalles.

Para configurar tu proyecto, puedes crear un nuevo proyecto de Flutter o agregar soporte web a un proyecto existente.

Para crear una nueva aplicación que incluya soporte web, ejecuta el siguiente comando:

$ flutter create my_app

Si ya tienes un proyecto, ejecuta el comando flutter create en el directorio de tu proyecto:

$ flutter create . --platforms web

Esto crea un directorio web/ que contiene los recursos web utilizados para iniciar y ejecutar tu aplicación Flutter.

Consulta las siguientes secciones para ejecutar tu aplicación.

Selecciona Chrome como el dispositivo de destino de tu aplicación para ejecutar y depurar una aplicación web de Flutter:

$ flutter run -d chrome

También puedes elegir Chrome como dispositivo de destino en tu IDE.

Si lo prefieres, puedes usar el tipo de dispositivo edge en Windows, o usar web-server para navegar a una URL local en el navegador de tu elección.

Puedes pasar la bandera --wasm para ejecutar tu aplicación usando WebAssembly:

$ flutter run -d chrome --wasm

Flutter web ofrece múltiples modos de compilación y renderizadores. Para obtener más información, consulta Renderizadores web.

Para deshabilitar temporalmente el soporte de Hot Reload desde VS Code, actualiza tu archivo de launch.json con la bandera --no-web-experimental-hot-reload.

"configurations": [
    ...
    {
      "name": "Flutter for web (hot reload disabled)",
      "type": "dart",
      "request": "launch",
      "program": "lib/main.dart",
      "args": [
        "-d",
        "chrome",
        "--no-web-experimental-hot-reload",
      ]
    }
  ]

Si usas flutter run desde la línea de comandos, puedes deshabilitar temporalmente Hot Reload en la web con el siguiente comando:

flutter run -d chrome --no-web-experimental-hot-reload

Hot Reload también está habilitado en DartPad con un nuevo botón "Reload". La función solo está disponible si se detecta Flutter en la aplicación en ejecución. Puedes iniciar una sesión compatible con Hot Reload seleccionando una aplicación de ejemplo proporcionada por DartPad.

Consulta las siguientes secciones para compilar tu aplicación.

Ejecuta el siguiente comando para generar una compilación de lanzamiento:

$ flutter build web

También puedes pasar la bandera --wasm para compilar tu aplicación usando WebAssembly:

$ flutter build web --wasm

Esto genera un directorio build/web con los archivos compilados, incluido un directorio assets, que deben servirse juntos.

Para obtener más información sobre cómo desplegar estos recursos en la web, visita Compilar y lanzar una aplicación web. Para respuestas a otras preguntas comunes, visita las preguntas frecuentes sobre la web.

Usa Flutter DevTools para las siguientes tareas:

• Depuración
• Registro de logs
• Ejecutar Flutter inspector

Usa Chrome DevTools para las siguientes tareas:

• Generar línea de tiempo de eventos
• Analizar el rendimiento; asegúrate de usar una compilación de perfil (profile build)

Usa pruebas de widgets o pruebas de integración. Para obtener más información sobre cómo ejecutar pruebas de integración en un navegador, consulta la página de Pruebas de integración.