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:
Un Mac o PC (en este tutorial usaremos un Mac)
Lo primero será instalar el SDK. En Mac, descargaremos el SDK desde la web oficial 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.
Para poder usar la variable PATH y ejecutar los comandos de flutter en cualquier sesión de terminal, hay que seguir los siguientes pasos:
Abrir (o crear) $HOME/.bash_profile con touch ~/.bash_profile; open ~/.bash_profile.
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 doctor -v¡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.
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.