Test inicial

Esta página describe como crear una app Flutter desde una plantilla, ejecutarla, y experimentar el “hot reload” y despues hacer cambios en la app.

Selecciona la herramienta de desarrollo que prefieras para escribir, compilar y ejecutar apps Flutter.

Crea la app

  1. Seleccionar File > New Flutter Project
  2. Seleccionar Flutter application como tipo de proyecto, y presionar Next.
  3. Asegúrate que el campo Flutter SDK Path especifica la localización del SDK. Instala el SKD si no lo has hecho ya.
  4. Introducir nombre de proyecto (ej. myapp), y presionar siguiente.
  5. Clic en Finish.
  6. Espera mientras Android Studio instala el SDK, y crear el proyecto.

Los comandos de arriba crean un directorio para el proyecto llamado myapp el cual contiene una app demo sencilla que utiliza Material Components.

Ejecutar app

  1. Localiza la barra de herramientas principal de Android Studio:
    Main IntelliJ toolbar
  2. En el target selector, selecciona un dispositivo android para ejecutar la app. Si ninguno esta en la lista como disponible, selecciona Tools> Android > AVD Manager y crea uno ahí mismo. Para más detalle, vea [Administrando AVDs][].
  3. Clic en el Run icon en la barra de herramientas, seleccionar Run > Run del menú.

Después de que el compilado de la app se complete, verás la app inicial en tu dispositivo.

Starter app on iOS
Starter app

Probando el hot reload

Flutter ofrece un ciclo de desarrollo rápido con hot reload, la habilidad de recargar el código en una app ejecutando en vivo sin reiniciar o perder el estado de la app. simplemente hace un cambio a tu código fuente, diciéndole a tu IDE o herramienta de línea de comandos que quieres recargar, y ver los cambio en tu simulador, emulador, o dispositivo.

  1. Open lib/main.dart.
  2. Cambia el texto
    'You have pushed the button this many times'

    a

    'You have clicked the button this many times'
  3. Guarda tus cambios: invoca Save All, o haz clic en Hot Reload offline_bolt.

Verás el texto actualizado en la app en ejecución casí inmediatamante.

Ejecutar en modo Profile

La app que has ejecutado hasta ahora esta en modo depuración que permite un desarrollo más rapido (ej., hot reload) con una gran sobrecarga de rendimiento. Por tanto, puedes esperar animaciones lentas en este modo. Para ver como rinden las apps en modo release, prueba invocar el menu Run > Profile en el IDE, o el siguiente comando en la terminal.

$ flutter run --profile

Las animaciones deben ser mucho mas suaves comparadas con el modo depuración.

Crear la app

  1. Llama a View > Command Palette
  2. Teclea “flutter”, y selecciona la acción Flutter: New Project
  3. Introducir el nombre del proyecto (como myapp), y presiona Enter
  4. Crear o seleccionar el directorio padre para el nuevo folder del proyecto
  5. Espera la creación del proyecto y completar la generación de el archivo main.dart y que aparezca.

Los comando de arriba crean un directorio para el proyecto llamado myapp el cual contiene una app demo sencilla que utiliza Material Components.

Ejecutar app

  1. Localizar la barra de estado de VS Code(la barra azul en la parte de abajo de la ventana):
    ![status bar][]{:.mw-100}
  2. Seleccionar el dispositivo de el área de Device Selector. Para detalles, vea Cambio rápido entre dispositivos de Flutter.
    • Si no se encuentra ningún dispositivo disponible y prefieres usar un simulador, clic No Devices y lance un simulador.
    • Para configurar un dispositivo real, siga las instrucciones para el dispositivo en específico para instalar en el SO que utilice.
  3. llamar a Debug > Start Debugging o presionar F5
  4. Espere que el app sea lanzada — el progreso se imprimirá en la vista de Debug Console

Después de que el compilado de la app se complete, verás la app inicial en tu dispositivo.

Starter app on iOS
Starter app

Probando el hot reload

Flutter ofrece un ciclo de desarrollo rápido con hot reload, la habilidad de recargar el código en una app ejecutando en vivo sin reiniciar o perder el estado de la app. simplemente hace un cambio a tu código fuente, diciéndole a tu IDE o herramienta de línea de comandos que quieres recargar, y ver los cambio en tu simulador, emulador, o dispositivo.

  1. Open lib/main.dart.
  2. Cambia el texto
    'You have pushed the button this many times'

    a

    'You have clicked the button this many times'
  3. Guarda tus cambios: invoca Save All, o haz clic en Hot Reload offline_bolt.

Verás el texto actualizado en la app en ejecución casí inmediatamante.

Crea la app

Usa el comando flutter create para crear un nuevo proyecto:

$ flutter create myapp
$ cd myapp

El comando crea un directorio de proyecto Fluuter llamado myapp que contiene una app simple de demostración que usa Material Components.

Ejecuta la app

  1. Verifica que un dispositivo Android esté ejecutándose. Si no se muestra ninguno, sigue las instrucciones específicas en la página Instalar para tu SO.

    $ flutter devices
    
  2. Ejecuta la app con el siguiente comando:

    $ flutter run
    

Después de que el compilado de la app se complete, verás la app inicial en tu dispositivo.

Starter app on iOS
Starter app

Probando el hot reload

Flutter ofrece un ciclo de desarrollo rápido con hot reload, la habilidad de recargar el código en una app ejecutando en vivo sin reiniciar o perder el estado de la app. simplemente hace un cambio a tu código fuente, diciéndole a tu IDE o herramienta de línea de comandos que quieres recargar, y ver los cambio en tu simulador, emulador, o dispositivo.

  1. Open lib/main.dart.
  2. Cambia el texto
    'You have pushed the button this many times'

    a

    'You have clicked the button this many times'
  3. Guarda tus cambios.
  4. Escribe r en la ventana de la terminal.

Verás el texto actualizado en la app en ejecución casí inmediatamante.

Ejecutar en modo Profile

La app que has ejecutado hasta ahora esta en modo depuración que permite un desarrollo más rapido (ej., hot reload) con una gran sobrecarga de rendimiento. Por tanto, puedes esperar animaciones lentas en este modo. Para ver como rinden las apps en modo release, prueba el siguiente comando en la terminal.

$ flutter run --profile

Las animaciones deben ser mucho mas suaves comparadas con el modo depuración.

Siguiente paso

A continuación, aprenderá algunos conceptos básicos de Flutter creando una pequeña aplicación.