Presentamos Flutter, bienvenido al mundo de las apps nativas.

9 de Julio de 2018 por Eric Serrulla

Presentamos Flutter, bienvenido al mundo de las apps nativas.

9 de Julio de 2018 por Eric Serrulla

Introducción a Flutter

El mundo de las apps evoluciona a ritmo acelerado y cada vez son m√°s las opciones y alternativas para desarrollar tu proyecto de la forma m√°s ajustada a las necesidades de este.

La semana pasada os hablábamos de la tecnología de React Native, y hoy veremos otra de las más interesantes y recientes: el proyecto Flutter de Google.

Flutter es un framework para desarrollar aplicaciones nativas de forma r√°pida para iOS y Android.

¬ŅQu√© hace a Flutter tan interesante?

Funciona con código existente, realiza los builds en tiempo récord y ofrece una UI flexible con multitud de widgets y funciones nativas del dispositivo.

Vamos a ver c√≥mo funciona con un simple tutorial en el que crearemos una pantalla con imagen y texto y una peque√Īa transici√≥n animada.

Necesitaremos:

  1. Un Mac o PC (en este tutorial usaremos un Mac)
  2. Android Studio instalado en el Mac (puedes descargarlo aquí)

Lo primero será instalar el SDK. En Mac, lo descargaremos de aquí y extraeremos el archivo zip en la ruta deseada.

Desde la terminal, y en la ruta donde hemos descomprimido el SDK, a√Īadimos la herramienta flutter para poder usarla en la sesi√≥n con el comando:

Para comprobar si hay dependencias que necesitamos instalar para completar el proceso, haremos lo siguiente.

Para poder usar la variable PATH y ejecutar los comandos de flutter en cualquier sesión de terminal, hay que seguir los siguientes pasos:

 

  1. Abrir (o crear) $HOME/.bash_profile  con  touch ~/.bash_profile; open ~/.bash_profile.
  2. A√Īadir la siguiente l√≠nea al archivo y cambiar¬†[RUTA_DIRECTORIO_FLUTTER] por la ruta donde hemos instalado el SDK.

Ejecutamos source $HOME/.bash_profile para refrescar la ventana actual.

Verificamos que el directorio flutter/bin est√° ahora en nuestro PATH ejecutando:

¬°Flutter ya est√° listo para ser utilizado!

Android Studio

Para utilizar Flutter en Android Studio es necesario instalar el plugin, para ello, en el men√ļ de inicio del programa iremos a Configuraci√≥n > Plugins, y buscaremos ‚ÄúFlutter‚ÄĚ.

Tras instalar Flutter y Dart, reiniciamos Android Studio.

Ahora ya nos aparece la opción de iniciar un nuevo proyecto de Flutter, así que la seleccionamos.

Seleccionamos la opción Start a new Flutter project, escogemos un nombre para nuestro proyecto y la ruta donde lo guardaremos, así como el nombre del paquete.

Cuando el proyecto creado se abre, se nos muestra abierto el archivo main.dart, que se encuentra en la carpeta lib. Dart es un lenguaje desarrollado por Google, orientado a objetos y con una sintaxis f√°cil y familiar si conoces C#, C++ o Java. Dart hace que trabajar con los widgets en Flutter sea extremadamente sencillo e intuitivo.

Antes de nada, vamos a entender cómo funcionan los widgets en Flutter.

Hay dos tipos de widgets: Stateful y Stateless. Solamente los widgets stateful permiten interacción por parte del usuario, pudiendo cambiar su estado y por lo tanto su apariencia en la UI.

Los estados consisten en valores que pueden cambiar, como el valor de un slider, si un checkbox está seleccionado o no,… El estado de un widget se guarda en un objeto State, que separa el estado del widget de su apariencia. Cuando el widget cambia de estado, el objeto de estado llama a setState(), haciendo que el widget se actualice.

Para la navegación entre las dos páginas que haremos, cada una de éstas serán widgets stateful.

Volviendo al proyecto inicial que se nos muestra, podemos observar en el archivo principal que el objeto MyApp se trata de un StatelessWidget.

Podemos ver que en el momento de crear este Widget se crea un objeto MaterialApp, el cual genera un layout con el tema Material de Google. Podemos cambiar el título, los colores y demás atributos de la clase.

Una de las características más atractivas de Flutter es que, mientras editamos el archivo main.dart y guardamos con CMD + S, se hace automáticamente un hot reload que actualiza en el emulador, en cuestión de milisegundos, los cambios que acabamos de realizar.

Creando nuestra propia App

Vamos a empezar con una pantalla sencilla con una imagen y texto.

Para poder utilizar las imágenes debemos de ir a pubspec.yaml y en assets, incluir los archivos que queramos usar. Para ello hemos creado una carpeta en el proyecto llamada images.

 

Volvemos a main.dart y en el body de nuestra app eliminamos el contenido del proyecto de ejemplo para poner nuestros propios componentes.

Para la navegación entre las dos pantallas necesitamos los dos objetos que generan el contenido de cada una, y los dos objetos que manejan el estado respectivamente.

En el objeto de estado de MyHomePage, crearemos un widget Card con una imagen, t√≠tulo, subt√≠tulo y un bot√≥n que nos llevar√° a ver la imagen a tama√Īo completo.

En el atributo onPressed del FlatButton situado en la ButtonBar de la Card, indicaremos el método que nos cambiará la vista a la pantalla de detalles. Este método es tan sencillo como declarar lo siguiente en el propio objeto State, indicando la ruta que queramos definir para vista de detalles:

Para que esta navegación funcione hay que declarar las rutas en el widget Build de MyApp:

Definimos ahora el objeto widget para la vista de detalles:

Y el objeto de estado, cuyo body contiene un objeto Center. Center tiene como child el objeto Hero que está relacionado con la imagen de la vista de card.

Lo imprescindible para que la animación Hero funcione es que ambos objetos hero en ambas pantallas tengan el mismo tag. El framework usa este tag para relacionar las dos imágenes y crear la transición entre ellas.

Con esto, hemos visto por encima lo sencillo que es agregar elementos a la UI con los widgets de Flutter y crear interacción entre ellos. Con el mismo código hemos generado dos aplicaciones nativas, una en iOS y otra en Android.

flutter_example_ios_android

Puedes descargar el proyecto completo de nuestra cuenta de GitHub.

Si necesitas¬†dise√Īar una app¬†ll√°manos al 93 408 90 30 o ponte en¬†contacto con nosotros.

 

Dribba, the mobile agency. Agencia de desarrollo de tecnolog√≠as mobile en Barcelona y Zurich. Desarrollamos apps nativas iOS y Android, para multinacionales y startups de todo el mundo. Consulta nuestros servicios tanto en desarrollo, dise√Īo como consultor√≠a mobile y tecnol√≥gica.

Notícias relacionadas

Esqueumorfismo vs. Flat Design

Durante los √ļltimos a√Īos se han utilizado diversos m√©todos de dise√Īo para interfaces mobile, hoy repasamos dos de ellas, esqueumorfismo y flat.