Flutter - Guia 1

Flutter con FIrebase
Instalación en Windows
Está guía de Flutter y Firebase ofrece la primera experiencia para crear una aplicación para
dispositivos Android con el lenguaje Dart y el frameWork Flutter. Además, los servicios de datos en
la nube es a través de Firebase.
Crearemos una aplicación de un formulario con funciones CRUD.
Instalación de la plataforma de
desarrollo en Windows
Para desarrollar en Flutter necesitamos:
1. Editor de código, en está guía empleamos VisualStudio Code
https://code.visualstudio.com/
2. Emulador de dispositivos Android, empleamos los emuladores de Android Studio
https://developer.android.com/studio
3. Lenguaje de programación Dart
https://dart.dev/
4. FrameWork Fluuter
https://flutter.dev/
Paso 1: Code como editor de código

Para instalar Visual Studio Code en Windows, debemos visitar la página:
https://code.visualstudio.com/
Página 1
Descargamos el programa, y esperamos para proceder con la instalación.
Página 2
La instalación es un programa asistido por windows.
Página 3
Página 4
Página 5
Cuando se abre el editor visual Studio Code, aparece en la pantalla algo similar a:
Página 6
Para trabajar más cómodo, es de utilidad tener instalado algunas extensiones y paquetes. Para
instalar extensiones en Visual Studio Code se debe ir a la opción de extensiones:
Recomiendo instalar las siguientes paquetes:
● Terminal de Jun Han
Página 7
● vscode-icons
Otra sugerencia es tener el grabado de archivos automático, así evitaremos perder código. Para
activar el guardado automático, podemo ir a configuración
Página 8
y en Settings, buscamos la opción Auto Save. La opción que recomiendo es onFocusChange,

la cual se activa cada vez que se activa una subventana, pestaña o cuando nos dirigimos a la
terminal.
Página 9
Página 10
Paso 2: Instalar los emuladores de máquinas

Android
Para configurar los emuladores de Android, es necesario descargar Android Studio. Android Studio
es una IDE (Entorno de Desarrollo Integrado). Es posible desarrollar Flutter en este entorno, pero
consume más memoria que VisualStudio Code, por está razón empleamos Code en lugar de Android
Studio para el desarrolla, pero que esto no sea un limitación.
Para instalar Android Studio, debemos ir a la pagina web:

https://developer.android.com/studio
Y damos click en el botón de descargar.
Página 11
Aceptamos los acuerdos e iniciamos la descarga.
Una vez terminada la descarga, ejecutamos el archivo que descargo y seguir las
instrucciones
Página 12
Presionamos Next para continuar
Seleccionamos donde instalamos el programa
Página 13
Seleccionamos la forma como estará en el menú de inicio
Inicia el proceso de instalación, este proceso puede tardar unos minutos.
Página 14
Cuando termina, presionamos Next
Activamos que inicia la aplicación (Start Android Studio) para continuar con la instalación.
Presionamos Finish
Página 15
Si tienes una versión de Android Studio instalada previamente y deseas relacionar el trabajo que
tienes en ella con esta nueva versión, selecciona Config or installation folder, de lo contrario,
selecciona Do not import settings, y presione Ok
se mostrará esta ventana y debemos esperar a que termine de iniciar la aplicación
Página 16
Se abre esta ventana solicitando autorización para compartir datos que son usados por Google en
su estadística, recomiendo aceptar la invitación presionando Send usage statistics to Google.
Después de unos minutos, aparece:
Presione Next para continuar con la configuración
Página 17
Se recomienda la instalación Standard, Presione Next.
Página 18
Seleccione el tono de escritorio que más le agrade y presione Next para continuar con la
instalación.
Página 19
Y para terminar la primera parte de la instalación, presione Next.
Página 20
Inicial la segunda parte de la instalación y la descarga de los paquetes iniciales

Este proceso tarda algunos minutos, depende la velocidad de internet y la configuración del equipo.
Página 21
Para terminar la segunda parte de la instalación de Android Studio, presione Finish. La
tercera parte de instalación se haces de la siguiente forma:
Página 22
Debemos instalar AVD (Dispositivo Virtual Android), que son los emuladores que se
requieren para probar el código en el dispositivo virtual.
Página 23
Creamos un nuevo dispositivo virtual.
En esta guía trabajaremos para aplicaciones móviles, por tal razón, empleamos como dispositivo un
Phone. Seleccione el teléfono de su agrado, principalmente por el tamaño de la pantalla.
Página 24
Luego de presionar Next, se debe seleccionar la versiones de Android que se emulara.
Página 25
Descarga la versión presionando en Download
debes aceptar las dos licencias
Página 26
Para iniciar la descarga, presione Next
Página 27
Página 28
Cuando la versión del sistema Android se ha instalado, el vínculo de download desaparece. Se
recomienda instalar HAXM para acelerar el proceso de máquina emulada.
Página 29
Página 30
Se debe seleccionar la configuración de la memoria, y presionar Next para continuar con la

instalación.
Se presiona Finish para continuar con la instalación.
Página 31
Seleccione la versión de Android que desea usar, y presione Next para continuar con la
instalación
Página 32
En este momento contamos con un dispositivo virtual, listo para probar el código.
También se puede activar el teléfono Android como dispositivo de desarrollo.
Página 33
Para configurar el teléfono, abra las opciones de ajuste, y diríjase a la opción del sistema
Presione por 10 veces la opción Número de Compilación, hasta que se active el modo programador, se
debe activar en el grupo de las opciones del sistema una opción nueva que indica “opciones de
programador”
Página 34
En las opciones de programador, busqe y active:

● Depuración por USB
● Verificar aplicaciones por USB
Página 35
Eso es todo, si ha llegado a este nivel, ya se tiene un dispositivo virtual en tu computadora y tu celular
esta en modo programador, lo que permite probar las aplicaciones que desarrolles en tu teléfono.
Si la capacidad de la computadora es baja, se recomienda usar el celular como dispositivo para ver
la ejecución del código.
Página 36
Paso 3: Instalar Flutter

Para instalar y ejecutar Flutter, el ambiente de trabajo debe de cumplir al menos con
los siguientes requerimientos:
● Sistema Operativo: Windows 7 SP1 o superior (64-bit)

● Espacio en Disco: 400 MB (no incluye espacio en disco para
IDE/herramientas).
● Herramientas: Flutter depende de que estas herramientas están disponibles
en tu entorno.
○ Windows PowerShell 5.0 o superior (este es pre-instalado con
Windows 10)
○ Git para Windows 2.x, con la opción Use Git from the Windows
Command Prompt
Si Git para Windows está ya instalado, asegúrate de poder correr
comandos con git desde el Command Prompt o PowerShell.
Para instalar git en windows, se debe visitar la página: https://git-scm.com/
Página 37
Ejecute el archivo que se descarga, y siga las opciones:
Página 38
Seleccione el lugar donde desea instalar la aplicación git
Presione siguiente para continuar
Página 39
Escriba el nombre como desea verlo en el menú
Seleccione el editor de preferencia, se recomienda Visual Studio Code.
Página 40
Presione Next para continuar

Seleccione Git from the command line and also from 3rd-party software para activar a Visual Studio
Code.
Página 41
Seleccione la opción Use the OpenSSL library como objeto de certificación, presione NExt para
continuar.
Página 42
Next para continuar
Next para continuar
Página 43
Next para continuar
Next para continuar
Página 44
Presione Install para iniciar el proceso de instalación
Página 45
Next para terminar con la instalación.
Para instalar Flutter, debemos visitar la página: https://flutter-es.io/
Página 46
y presionamos Empenzar
Página 47
Seleccionamos el sistema operativo. En esta guia es Windows
Descargamos el archivo flutter_windows_1.17.2-stable.zip
Página 48
Descomprimir el archivo el la carpeta que se desea.
Página 49
Página 50
Ubique el archivo flutter_console.bat y ejecutalo con haciendo click o por terminal

escribiendo: flurrer_console.bat
Página 51
Si das click o ejecutas el comando por PowerShell, dependiendo del nivel de seguridad de
Windows, puede salir un advertencia:
Página 52
Página 53
Se debe ver una ventana de consolo similar a:
Página 54
digita flutter doctor para ejecutar el diagnóstico
Tenemos a flutter listo, pero debemos continuar con la configuración
Editamos las variables de entorno
Página 55
Página 56
Página 57
Página 58
Se relaciona la carpeta bin de la carpeta donde se descomprime el archivo de flutter. Es
recomendable reiniciar el computador.
En esta guía usamos el VisualStudio Code como editor de programación, para relacionar el Flutter
con VisualStudio Code, debemos abrir el VisualStudio Code y presionar la opción Command
Palette… para ejecutar comandos, o presionar del teclado las teclas Ctrl + Mayúsculas + P
Página 59
Página 60
Escriba install y aparece una lista, seleccione Extensions: install Extensions.
Instale Flutter
Página 61
Validemos la configuración ejecutando flutter doctor
seleccionamos de la barra de menú, la opción View>Command Palette.. y

tecleamos doctor
Página 62
Página 63
Para superar esta prueba de flutter doctor hay que ejecutar el comando que sugiere el asistente,
desde la ejecución por terminal
Página 64
Para superar la prueba de flutter doctor hay que instalar en Android Studio el flutter y el dart.
Página 65
Página 66
Página 67
Página 68
Página 69
Ya estamos preparados para hacer el primer proyecto de prueba
Paso 4: Proyecto de prueba

Ejecutamos el comando con presionando Ctrl + Mayúsculas + P y escribimos flutter.
Selecione Flutter:New Project
Página 70
Escriba el nombre del proyecto
Seleccione el lugar donde hospeda el código
Página 71
Flutter inicial a creación de archivos y carpetas
Al finalizar, se tiene una estructura con archivos del proyecto en flutter
Página 72
Para ejecutar el código, seleccionamos Run>Start Debugging o F5
Y seleccionemos el dispositivo móvil que deseamos. Si el celular esta conectado, aparece en la

lista.
Página 73
El proceso de inicio del emulador puede tardar varios minutos. Depende de la máquina.
Al final si logramos ver la aplicación ejecutándose en un celular simulado o el propio,

estamos listo para la siguiente guía.
Página 74
Al presionar en el círculo + , el número debe aumentar.
Página 75
Una vez el emulador está activo, no se requiere iniciar de nuevo para ver los cambio, he cambiado el
código del archivo main.dart y al guardarlo, se compila de nuevo y se actualiza de forma automática
el emulador.
Página 76
Ya estás preparado para la siguiente guía.
EVIDENCIAS:
Página 77
Página 78
Página 79

Flutter - Guia 1

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Flutter - Guia 1

Cargado por

Copyright:

Formatos disponibles

Flutter con FIrebase

Crearemos una aplicación de un formulario con funciones CRUD.

Paso 1: Code como editor de código

Descargamos el programa, y esperamos para proceder con la instalación.

La instalación es un programa asistido por windows.

Recomiendo instalar las siguientes paquetes:

● Terminal de Jun Han

y en Settings, buscamos la opción Auto Save. La opción que recomiendo es onFocusChange,

Paso 2: Instalar los emuladores de máquinas

Para instalar Android Studio, debemos ir a la pagina web:

Y damos click en el botón de descargar.

Aceptamos los acuerdos e iniciamos la descarga.

Presionamos Next para continuar

Seleccionamos donde instalamos el programa

Seleccionamos la forma como estará en el menú de inicio

Inicia el proceso de instalación, este proceso puede tardar unos minutos.

Cuando termina, presionamos Next

se mostrará esta ventana y debemos esperar a que termine de iniciar la aplicación

Después de unos minutos, aparece:

Presione Next para continuar con la configuración

Se recomienda la instalación Standard, Presione Next.

Y para terminar la primera parte de la instalación, presione Next.

Inicial la segunda parte de la instalación y la descarga de los paquetes iniciales

Para terminar la segunda parte de la instalación de Android Studio, presione Finish. La

tercera parte de instalación se haces de la siguiente forma:

Creamos un nuevo dispositivo virtual.

Luego de presionar Next, se debe seleccionar la versiones de Android que se emulara.

Descarga la versión presionando en Download

debes aceptar las dos licencias

Para iniciar la descarga, presione Next

Cuando la versión del sistema Android se ha instalado, el vínculo de download desaparece. Se

recomienda instalar HAXM para acelerar el proceso de máquina emulada.

Se debe seleccionar la configuración de la memoria, y presionar Next para continuar con la

Se presiona Finish para continuar con la instalación.

También se puede activar el teléfono Android como dispositivo de desarrollo.

En las opciones de programador, busqe y active:

Paso 3: Instalar Flutter

● Sistema Operativo: Windows 7 SP1 o superior (64-bit)

Para instalar git en windows, se debe visitar la página: https://git-scm.com/

Ejecute el archivo que se descarga, y siga las opciones:

Seleccione el lugar donde desea instalar la aplicación git

Presione siguiente para continuar

Escriba el nombre como desea verlo en el menú

Seleccione el editor de preferencia, se recomienda Visual Studio Code.

Presione Next para continuar

Next para continuar

Next para continuar

Next para continuar

Next para continuar

Presione Install para iniciar el proceso de instalación

Next para terminar con la instalación.

Para instalar Flutter, debemos visitar la página: https://flutter-es.io/

Seleccionamos el sistema operativo. En esta guia es Windows

Descargamos el archivo flutter_windows_1.17.2-stable.zip

Descomprimir el archivo el la carpeta que se desea.

Ubique el archivo flutter_console.bat y ejecutalo con haciendo click o por terminal

Se debe ver una ventana de consolo similar a:

digita flutter doctor para ejecutar el diagnóstico

Tenemos a flutter listo, pero debemos continuar con la configuración

Editamos las variables de entorno

Se relaciona la carpeta bin de la carpeta donde se descomprime el archivo de flutter. Es

recomendable reiniciar el computador.

Escriba install y aparece una lista, seleccione Extensions: install Extensions.

Validemos la configuración ejecutando flutter doctor