Empezar: Prueba Inicial

Esta página describe como hacer tu prueba inicial en Flutter: crear una nueva app de Flutter con nuestras plantillas, ejecutarla, y aprender cómo hacer cambios con “Hot Reload”.

Flutter es un juego de herramientas flexible, por favor empieza por seleccionar tu herramienta de desarrollo favorita para escribir, crear y ejecutar tus apps de Flutter.

Android Studio: Un experiencia completa e integrada del IDE para Flutter.

Crear una app nueva

  1. Seleccionar File > New Flutter Project
  2. Seleccionar Flutter application como tipo de proyecto, y presionar siguiente
  3. Introducir nombre de proyecto (ej. myapp), y presionar siguiente
  4. Clic en Finish
  5. 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.

Dentro del directorio del proyecto, el código de tu app, esta en lib/main.dart.

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ú.
  4. Si todo funciona, deberás de ver iniciar tu app en el dispositivo o simulador:
    App iniciada en Android

Probando hot reload

Flutter ofrece un ciclo de desarrollo rápido con hot reaload, 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. Cambia el texto
    'You have pushed the button this many times:' a
    'You have clicked the button this many times:'
  2. No presione el botón de ‘Stop’; permita que su app continué ejecutándose.
  3. Para ver tus cambios presione Save All, o clic Hot Reload (el botón con el icono del relámpago).

Deberás ver como el texto actualizado en la app ejecutándose casi inmediatamente.

VS Code: Un editor ligero con Flutter, asistencia al correr y depurar.

Crear una nueva app

  1. Iniciar VS Code
  2. llamar View > Command Palette
  3. Teclea “flutter”, y selecciona la acción Flutter: New Project
  4. Introducir el nombre del proyecto (como myapp), y presiona Enter
  5. Crear o seleccionar el directorio padre para el nuevo folder del proyecto
  6. 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.

Dentro del directorio del proyecto, el código de tu app esta en lib/main.dart.

Ejecutar app

  1. Localizar la barra de estado de VS Code(la barra azul en la parte de abajo de la ventana)
  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 empezar: 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
  5. Si todo funciona, después de que la app sea construida, podrá ver la app iniciada en su dispositivo:
    App Iniciada en Android

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. Cambia el texto
    'You have pushed the button this many times:' a
    'You have clicked the button this many times:'
  2. No presione el botón de ‘Stop’; permita que su app continué ejecutándose.
  3. Para ver tus cambios presione Save All, o clic Hot Reload (el botón con el icono del relámpago).

Deberás ver como el texto actualizado en la app ejecutándose casi inmediatamente.

Terminal + editor: Su editor de elección combinado con herramienta de terminal de Flutter para ejecutar y construir.

Crear una nueva app

  1. Use el comando flutter create para crear un nuevo proyecto:
$ flutter create myapp
$ cd myapp

El comando de arriba crea el directorio del proyecto de Flutter llamado myapp el cual contiene una app demo sencilla que utiliza Material Components.

Dentro del directorio del proyecto, el código de tu app esta en lib/main.dart.

Ejecutar app

  • Verifica que un dispositivo Android se este ejecutando. Si no se muestra ninguno, vea configuración.
$ flutter devices
  • Ejecuta la app con el comando flutter run:
$ flutter run
  • Si todo funciona, después de que la app sea construida, deberás ver tu app iniciada en el dispositivo o simulador:
    App Iniciada en Android

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. Cambia el texto
    'You have pushed the button this many times:' a
    'You have clicked the button this many times:'
  2. No presione el botón de ‘Stop’; permita que su app continué ejecutándose.
  3. Para ver tus cambios presione Save All, o clic Hot Reload (el botón con el icono del relámpago).

Siguiente paso

Aprendamos algunos conceptos del núcleo de Flutter, creando una pequeña app

Siguiente paso: Escribir tu primera app