Laboratorio 8: Introducción a la programación en Google Flutter

Aplicaciones Móviles Multiplataforma                [pic 1]

[pic 2]

[pic 3]        [pic 4]

Laboratorio 8: Introducción a la programación en Google Flutter

Objetivos:

Al finalizar el laboratorio el estudiante será capaz de:

• Instalación de Flutter
• Uso de recursos en la nube y/o escritorio
• Creación de App en Flutter

Seguridad:

• Ubicar maletines y/o mochilas en el gabinete del aula de Laboratorio.
• No ingresar con líquidos, ni comida al aula de Laboratorio.
• Al culminar la sesión de laboratorio apagar correctamente la computadora y la pantalla, y ordenar las sillas utilizadas.

Equipos y Materiales:

• Una computadora con:
• Windows 7 o superior
• Conexión a la red del laboratorio

• Recurso Web:

https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1#0

• Máquinas Virtuales
• Windows 7 Pro 64bits Español – Plantilla

Marco Teórico:

Flutter es un framework de desarrollo de aplicaciones móviles, web, escritorio y embebidas desde solo una base de código. Solo se implementa un código y Flutter permite compilar ese código para diferentes plataformas. También permite compilar a nativo.

Entre sus ventajas se tienen las siguientes:

• Rápido: El código Flutter se compila en código máquina del dispositivo en el cual desplegamos el proyecto, así como en Javascript, para un rendimiento rápido en cualquier dispositivo.

• Productivo: Permite el Hot Reload, es decir que vamos escribiendo código y cuando guardemos los cambios, veremos los cambios rápidamente en el dispositivo o emulador en el que estamos desplegando el proyecto. Reduce así los tiempos de compilación.

• Flexible: La forma en la que programamos la UI es integrando diversos componentes, configurando estilos para cada componente o widget.

Se ha vuelto popular debido a las siguientes razones:

• Fácil de aprender
• Fácil de programar
• Rendimiento nativo: cuando compilamos la aplicación al código de acuerdo a cada plataforma, no se diferencia si es una aplicación desarrollado con Flutter o totalmente en nativo.

El lenguaje de programación con el cual trabaja Flutter es Dart. Es un lenguaje de propiedad de Google, OpenSource.

Entre las principales características de Dart se tienen las siguientes:

• Creado por Google para mejorar JS
• Encontró el aliado perfecto junto a Flutter
• Lenguaje Open-Source orientado a objetos
• Null-safety, por defecto una variable no puede ser nula. Si se desea ello, lo tenemos que especificar, trayendo mejoras en la compilación y el uso de instrucciones de control (IF) en relación a las variables.

Procedimiento:

1. Comprobación rápida de un programa Dart:

1. Ingresamos al portal de Dart Env mediante el enlace: dartpad.dev

1. Generamos el método principal como sigue:

[pic 5]

1. Creamos una clase y configuramos un atributo:

[pic 6]

1. Comprobamos que se muestra el siguiente error

[pic 7]

Este error se produce porque no se pueden definir campos nulos.

[pic 8]

1. Para corregir el error anterior, generamos el método constructor y otorgamos un valor al atributo:

[pic 9]

[pic 10]

1. Menciona a qué se refiere la advertencia que se está generando.

[pic 11]

1. Completamos el código con el uso de constantes, finales, parámetros nombrados y requeridos, para evitar que las variables sean nulas:

[pic 12]

[pic 13]

1. Se pueden definir variables nulas, como se indica a continuación:

[pic 14]

[pic 15]

1. Para mostrar el contenido de esta variable que no es nula se agrega lo siguiente:

[pic 16]

1. Hacemos uso del botón “Run”, comprobamos y compartimos los resultados obtenidos.

[pic 17]

1. Comentamos los detalles principales.

[pic 18]

1. Instalación de herramientas principales para el manejo de proyectos Flutter:

1. Para un manejo adecuado de proyectos Flutter, se requiere instalar lo siguiente:

• Flutter SDK (Revisar la documentación official: flutter.dev. Luego ingresar a “Get Started”). Revisar los requerimientos de Hardware que indica. Se recomienda tener 20GB libres de disco duro. Así también revisar los requerimientos para su instalación en diversas plataformas. Descargar e instalar el instalador en una carpeta diferente de “C:\Program Files\”.
• Android Studio (emulador)
• VS Code

1. Para disponer Flutter en nuestro equipo, descomprimimos el archivo ZIP en una carpeta de nuestro disco duro (sugerencia: una vez que se haya descomprimido el archivo, pasar la carpeta ‘Flutter’ a la última unidad de nuestro disco duro).  

1. Vamos a agregar la ruta donde se encuentra la carpeta ‘bin’ en la variable de entorno PATH. Guardamos todos los cambios.

[pic 19]

1. Comprobamos que ya podemos utilizar Flutter, ingresando a Windows Power Shell e ingresando el comando:

[pic 20]

1. Luego, instalamos, o verificamos que Android Studio esté disponible en nuestro equipo. Instalamos los siguientes plugins:

[pic 21]

[pic 22]

1. Al reiniciar Android Studio, verificamos que se dispone de la opción para crear un proyecto de Flutter, en caso quisiéramos generar ello desde Android Studio:

[pic 23]

...