Flutter es un nuevo framework creado por Google para crear aplicaciones móviles multi plataformas.

Las apps de Flutter están escritas en Dart, que también fue creado por Google para sustituir a JavaScript, y aunque es un lenguaje nuevo, si has trabajado con Java, C# o cualquier otro lenguaje de programación moderno es muy fácil de aprender.

En este tutorial vamos a crear una pequeña app en donde mostraremos una lista de imágenes desde una API, con esto veremos los conceptos básicos de Flutter y empezaremos a trabajar con JSON que es de lo más común en nuestras aplicaciones.

Creando nuestro entorno de desarrollo.

Lo primero que debemos hacer es instalar Flutter, dependiendo del Sistema Operativo que tengas, la forma de instalar flutter se encuentran aquí.

Una vez que tengamos instalado Flutter, debemos checar que todo esté bien

Y vemos que nuestro setup esté bien

Ahora, es tiempo de crear nuestro proyecto

Esto nos daría la siguiente estructura

Aquí el archivo más importante es  main.dart , ya que es donde empezaremos a crear nuestra app.

Primeros pasos

Antes que nada, vamos a correr nuestra aplicación para ver que tenemos nuestro setup correctamente, dependiendo del Editor que hayas escogido (yo escogí Visual Studio Code) hay que darle F5 para que corra en debug.

Si todo sale bien, podremos ver la app de ejemplo funcionando en nuestro simulador de iOS, en el simulador de Android o nuestro dispositivo físico.

App corriendo en iPhone y Android

Si todo salió bien, ya estaremos listo para crear nuestra aplicación.

Diseñando la aplicación de Images

Vamos a crear una pequeña aplicación que va a mostrar imágenes y su título de una API que está disponible libremente, por lo cual aprenderemos los conceptos básicos de una app en Flutter y podremos hacer cosas un poco más avanzadas.

La aplicación que crearemos es la siguiente

Mockup de la aplicación

Tendremos un botón que, cada vez que presionemos, agregará una imagen a una lista, esta lista será deslizable para que podamos ver todas las imágenes que vayamos agregando.

Al crear esta app aprenderemos:

  • Sobre Widgets
  • Imágenes
  • Trabajar con JSON
  • Eventos en Flutter

Para aprender bien todos estos conceptos, lo primero que vamos a hacer es borrar todo lo que tiene el archivo  main.dart y sustituyámoslos por lo siguiente:

Lo primero que vemos es que estamos importando una biblioteca de flutter llamada  material.dart que nos proporciona un diseño basado en Material y que se adapta a las características de iOS y Android (por ejemplo, en iOS la barra de título está centrada mientras que en Android se encuentra a la derecha), también nos proporciona algunas funciones básicas para construir nuestra app.

En toda aplicación de dart, todo programa empieza a correr en el método main. Por lo cual creamos un método en el cual vamos a poner nuestro código para que inicie la aplicación.

Dentro del método main, crearemos un nuevo widget. En Flutter los widgets son el concepto más básico que aprenderemos. Los widgets son bloques con los cuales creamos los elementos gráficos de nuestra app. Algunos Widgets son visibles, como los botones, y otros son elementos invisibles pero que nos ayudan a modelar la app, como por ejemplo los márgenes.

Es hora de correr la aplicación. Si aún no has detenido la app, dale Guardar al archivo y verás una de las características más productivas de Flutter, que es el Hot Reload. Con esta característica podemos ir viendo los cambios en tiempo real sin tener que compilar el código cada vez que hagamos un cambio, esto nos ayuda mucho a ir probando la aplicación sin perder tiempo. Al hacer el Hot Reload, podemos ver lo siguiente

Bueno, no se ve tan impresionante, pero es el primer paso en nuestra jornada como Desarrolladores Flutter. Hasta este punto ya sabemos tres conceptos básicos

  • Sabemos de donde vienen los widgets básicos
  • Toda aplicación de Flutter y por consiguiente Dart, empiezan en el método main
  • Qué son los widgets

Mostrando un Scaffold

Si de algo nos ayuda mucho la biblioteca de material.dart, es poder tener ya widgets armados y bien hechos para crear la UI de nuestra app, y una de ellas es Scaffold. El Scaffold es un contenedor que implementa la estructura visual de una app hecha con Material Design, este contenedor nos provee de APIs para mostrar barras, botones y otros widgets que veremos más adelante.

Si vemos nuestro mockup, necesitaremos de una barra superior que contenga el título de nuestra aplicación y un botón que nos servirá para agregar imágenes, y gracias al Scaffold será muy fácil crearlos.

Vamos a sustituir  la parte de Material App

Por lo siguiente

Corremos nuestra app (Hot Reload) y veremos lo siguiente

¡Vaya! Ya va tomando forma nuestra app. Con poco código creamos la estructura principal de la aplicación.

Aunque el código no es mucho, si tiene varias cosas que hay que apuntar.

Como ya habíamos hablados, el Scaffold nos permite tener una estructura predefinida para usar y agregar otros widgets.

El Scaffold nos permite agregar una barra superior en el cual podemos poner otros Widgets, en este caso, como título ponemos un widget de texto.

Al igual que Scaffold nos permite agregar una barra superior fácilmente, también tiene la opción de tener un botón flotante, este botón acepta como Widget un FloatingActionButton, que permite tener un hijo, en el cual nosotros pusimos un ícono (también un Widget) y un evento onPressed: que acepta una función anónima en donde podemos poner acciones que se ejecutarán cuando se presiona el botón. Este evento lo utilizaremos más adelante.

Con lo que hemos hecho hemos avanzado en crear nuestra primera app con Flutter, en la siguiente parte vamos a seguir avanzando limpiaremos un poco nuestra app para tener todo más organizado.

Si tuviste algún problema o tienes alguna duda, puedes ponerlo en los comentarios y con gusto te ayudaré.

 

%d bloggers like this: