Tutorial - Aprende Flutter – Primeros Pasos

¿Qué es Flutter?

Flutter es un Framework propiedad de Google que permite crear aplicaciones multiplataforma de forma nativa en el lenguaje Dart.

Este Framework es un SDK(Software Development Kit) que incluye librerías, elementos de UI y herramientas de testeo para que nuestra aplicación sea fácil y eficiente.

¿Cuáles son las ventajas de Flutter?

• Es un Framework que nos permite crear aplicaciones multiplataforma de forma nativa.
• El framework a pesar de estar creado en C++ utiliza un único lenguaje llamado Dart para crear aplicaciones para todas las plataformas. Al estar su núcleo creado con C++ permite que nuestras aplicaciones sean rápidas.
• Tiene elementos ya predefinidos de interfaz de usuario que nos facilitan el desarrollo como botones, barras de navegación etc...
• Más rápido y eficiente que Ionic o React Native
• Es un Framework que tiene la cualidad de Hot reload lo que permite que mientras ejecutas la aplicación en el emulador los cambios se ven al instante en ella.
• Tiene elementos ya predefinidos de interfaz de usuario que nos facilitan el desarrollo como botones, barras de navegación etc…
• Posee un motor propio de renderizado de aplicaciones basado en Skia, lo que implica que no utiliza las Web Views ni los OEM Widgets de los dispositivos ya que tiene una gran librería widgets propios.
• Además es el Framework oficial para Fucshia el primer sistema operativo desarrollado por Google que no está basado en Linux/Unix

Instalación

Flutter en MacOS

Para poder instalar Flutter en nuestro ordenador Mac tendremos que acceder a la siguiente página: https://flutter.dev/docs/get-started/install/macos y descargarnos el paquete zip, abrirlo en el directorio deseado y ejecutar el siguiente comando si se quiere hacer por consola, deberemos tener en cuenta que la carpeta donde tengamos el archivo es donde tendremos que ejecutar los comandos:

cd ~/Flutter unzip ./flutter_macos_v1.2.1-stable.zip

Ahora deberemos añadir Flutter a las variables de entorno de nuestro ordenador con el siguiente comando:

export PATH="$PATH:`pwd`/flutter/bin"

A continuación deberemos comprobar si existen dependencias que se necesiten instalar con el siguiente comando:

flutter doctor

El comando anterior nos mostrará por consola que tipo de dependencias y en que plataformas nos falta añadir dicha extensión por lo que deberemos ir a dichas plataformas e instalarlos.

Flutter en Windows

Para instalar Flutter en Windows tendremos que realizar pasos similares. Comenzaremos por descargarnos el paquete de instalación de está página: https://flutter.dev/docs/get-started/install/windows

A continuación, deberemos añadir a las variables de entorno Flutter, para ello tendremos que añadir la ruta de flutter a la variable de entorno.

Una vez tengamos la variable de entorno establecida iremos a la carpeta donde hemos descomprimido el archivo y abrimos una consola y ejecutaremos el siguiente comando:

flutter doctor

Para usar Flutter en Windows vamos a necesitar ciertas herramientas que serán similares a las que necesitaremos en Mac:

Android studio para testeo en androidIntellij para el testeo en iOSVisual Studio Code para crear las aplicaciones

Mi primer Proyecto

Para empezar a trabajar con Visual Studio debemos añadir la extensión Flutter a este. Esta extensión también añade la extensión para el lenguaje Dart, que como hemos visto es el que utiliza Flutter.

Para comprobar que que todo ha ido bien podemos utilizar Flutter Doctor a través de Command Palette de Visual Studio, para esto utilizamos Ctrl+shift+p y tecleamos doctor para seleccionar Flutter: Run Flutter Doctor. Ahora en la consola de Visual Studio nos devolverá el retorno de Flutter Doctor

Ahora que todo funciona volvemos a la Command Palette, en la cual ahora escribimos flutter para seleccionar Flutter: New Project, el cual nos pedirá el nombre de nuestra aplicación y el directorio donde crearla. Este comando nos creará una aplicación básica de Flutter a partir de la cual realizaremos una modificaciones para observar cómo funciona el HotReload de Flutter.

Crear Emulador

Ahora intentaremos iniciar nuestra aplicación sobre un dispositivo móvil, en nuestro caso vamos a crear un emulador en Android Studio para utilizarlo para esto. Lo primero que tenemos que hacer que es iniciar Android Studio y seleccionar Configure > AVD Manager

Ahora en la parte inferior veremos un botón llamado “Create Virtual Device“. Pulsamos sobre él y se nos abrirá un sencillo asistente de configuración del hardware del dispositivo que vamos a virtualizar.

En nuestro caso, elegimos un dispositivo que utilice Android 9 como sistema operativo y hacemos click en “Siguiente”.

Ahora nos pedirá que seleccionemos una versión de Android para descargar. Seleccionamos Android Pie “Android 9”, y la descargamos.

Por último configuramos las opciones a nuestro gusto y guardamos los cambios para que nuestro nuevo móvil aparezca en la lista de nuestros dispositivos.

Finalmente iniciamos el dispositivo pulsando en el botón de “Play” desde la lista de dispositivos.

Si hemos realizado esto correctamente nos deberá de aparecer en la parte inferior de Visual Studio para poder iniciar el proyecto:

Ahora pulsaremos F5 para iniciar el proyecto en el emulador que hemos creado:

La aplicación básica de Flutter es un contador de veces que se pulsa un botón.

Estructura del proyecto

Ahora que vemos que el proyecto funciona vamos a hablar de la estructura de este:

Las carpetas más importantes son:android: aqui se despliega la aplicación para AndroidiOS: en la cual se añade el proyecto para iOStest: para testear nuestro proyectolib: la carpeta principal del proyecto de flutter, en la cual encontramos

Dentro de lib esta el archivo main, que es el archivo principal de la aplicación de Flutter a partir del que realizaremos toda la aplicación.

Cambios Rápidos

Vamos a cambiar main.dart para que muestre Hola mundo! en el centro de la pantalla, para esto sobreescribimos la clase MyHomePage con :

class MyHomePage extends StatelessWidget { 
	MyHomePage({Key key, this.title}) : super(key: key); 
	final String title; 

	@override 
	Widget build(BuildContext context) {   
		return Scaffold(     
			appBar: AppBar(       
				title: Text(title)     
			),     
			body: Center(       
				child: Text('Hola mundo!')     
			)   
		); 
	}
}

La nueva clase extiende StatelessWidget porque no necesitamos que mantenga ningún estado para almacenar datos que van variando. Además hay que sobreescribir el método build para devolver el contenido que queremos mostrar, en este caso un Scaffold que es todo lo que vemos por pantalla, con una AppBar, que es la barra superior de la App y un Center, para que el texto quede centrado.

Y al guardar el documento se actualiza la aplicación para mostrar los cambios realizados en el código sin necesidad de volver a iniciar el proyecto

Con esto hemos creado un Hola Mundo! en Flutter.