Aprenderemos a crear una app sencilla con Flutter, desde Visual Studio Code y desde la terminal, veremos lo fácil y rápido que se puede lograr una app en Flutter.
Instalar vscode
El proceso de instalación de Visual Studio code (vscode) es bastante sencillo, basta con seguir estos pasos:
- Ir a la página de vscode.
- Allí tenemos un par de opciones, la primera es la que ya nos brinda de entrada la página que detecta nuestro sistema operativo y nos muestra el instalador correspondiente, como vemos en la parte izquierda de la imagen.
- La segunda opción que tenemos es ir a la sección de descargas donde veremos los diferentes instaladores dependiendo del Sistema Operativo. Podemos acceder como lo muestra la imagen anterior arriba a la derecha y ingresando directo al link.
- Al presionar en la opción de nuestra preferencia iniciará la descarga en el navegador.
- Una vez descargado, lo descomprimimos y quedará la app para ejecutarla.
- Al ejecutarla pedirá algún tipo de confirmación y listo, ya podemos usar vscode.
¡Hola Mundo! en vscode
Para crear una aplicación Flutter con Visual Studio Code, podemos realizarlo mediante las siguientes indicaciones.
Crear app Flutter
- Crear una carpeta/directorio donde vamos a alojar nuestra aplicación. Para este ejercicio utilizaremos ~/development/apps.
- Una vez creada la carpeta podemos arrastrarla y soltarla en vscode o simplemente ir a la opción de menú File — Open Folder…, allí se abrirá el buscador de archivos y seleccionamos la carpeta y luego botón Abrir y listo.
- Abrir la paleta de comandos con la combinación de teclas: cmd + Shift + P.
- Allí escribimos flutter y nos mostrará todas las opciones disponibles.
- Nos interesa la que dice Flutter: New Project, seleccionamos esa.
- Luego nos pide seleccionar la carpeta donde se creará la aplicación de Flutter.
- Por último nos pide colocar el nombre de la aplicación y presionamos Enter, y eso sería todo, ya eso se encarga de generarnos la estructura inicial de una aplicación Flutter.
Ejecutar app Flutter
Para ejecutar nuestra app ya generada, hay diferentes formas y es recomendable tener algún emulador ya previamente instalado.
Para iOS, con tener instalado Xcode sería suficiente. Se puede realizar desde la propia tienda de Apple o desde la página oficial de Xcode (Luego haremos una mini guía para realizarlo paso a paso).
Para Android, es importante tener el Android Studio instalado, podemos hacerlo mediante esta guía. Luego podemos crear el emulador.
Una vez tengamos ya alguno de los emuladores anteriores, podemos ejecutar nuestra app Flutter allí.
- Debemos ejecutar nuestro simulador primero.
Android — Abrir Android Studio, ir a Device Manager y dar clic en Start del emulador.
iOS — ejecutar el comando: open -a simulator.
- Una vez tengamos ejecutando el emulador, de nuevo abrimos la paleta de comandos con: cmd + Shift + P.
- Allí escribimos flutter y seleccionamos la opción: Flutter: Select Device.
- Seleccionamos el emulador que tenemos activo.
- Allí abrimos la clase main.dart y damos en la opción Start Debugging.
- Como es la primer vez que lo abrimos se demorará unos minutos y luego se verá la app en el emulador.
- Podemos realizar cambios en caliente por la característica que tiene Flutter de Hot reload, veremos los cambios casi instantáneamente.
Y eso sería todo!, tenemos nuestro primer Hola Mundo en Flutter. Espero les pueda servir para ir iniciando en Flutter.
Conclusión
Vimos que tan fácil y rápido se puede empezar en Flutter, montar una app realmente no lleva mucho tiempo ni requiere mucho conocimiento avanzado, igual apenas iniciamos, queda mucho por aprender.
Gracias por leer!!!
Siguientes pasos
Veremos la estructura inicial del proyecto en Flutter.