Advertisement
  1. Code
  2. Android SDK

Google Flutter desde cero: Creando aplicaciones con widgets

by
Read Time:10 minsLanguages:
This post is part of a series called Google Flutter From Scratch.
Google Flutter From Scratch: Grids, Lists, and Data Sources

Spanish (Español) translation by steven (you can also view the original English article)

Flutter se está convirtiendo rápidamente en uno de los frameworks más populares para desarrollar aplicaciones móviles multiplataforma. La mayoría de los desarrolladores de Android e iOS están empezando a estar de acuerdo en que es una alternativa más rápida y preparada para el futuro a otros frameworks multiplataforma como React Native y NativeScript.

Google mismo no deja piedra sin remover para atraer a más desarrolladores. Por ejemplo, Google I/O este año tuvo varias sesiones en profundidad que se enfocaron en desarrollar aplicaciones compatibles con Material Design. Durante una de las sesiones, Google también anunció que Flutter será una plataforma de primera clase para Material Design.

Durante una de las sesiones, Google también anunció que Flutter será una plataforma de primera clase para Material Design.

Prerrequisitos

Para aprovechar al máximo esta serie, necesitarás:

  • La última versión de Android Studio.
  • Un dispositivo o emulador que ejecute el nivel de API de Android 21 o superior.

1. Configurando Android Studio

Después de instalar algunos complementos livianos, puedes usar Android Studio, el IDE nativo de los desarrolladores de aplicaciones de Android al que están más acostumbrados, para desarrollar aplicaciones de Flutter.

Comienza iniciando Android Studio y eligiendo la opción Configurar > Complementos en la pantalla de bienvenida.

En el cuadro de diálogo que aparece, presiona el botón Examinar repositorios y busca el complemento Flutter.

Browse repositories dialogBrowse repositories dialogBrowse repositories dialog

Una vez que encuentres el complemento, presiona su botón Instalar. En este punto, se te preguntará si también deseas instalar el complemento Dart. Presiona Sí para continuar.

Plugin dependencies dialogPlugin dependencies dialogPlugin dependencies dialog

Una vez instalados ambos complementos, presiona el botón Reiniciar Android Studio para completar la configuración.

2. Creando un proyecto nuevo

Después del reinicio, podrás ver un botón Iniciar un nuevo proyecto de Flutter en la pantalla de bienvenida de Android Studio. Presiónalo para comenzar a crear tu primer proyecto de Flutter.

En la siguiente pantalla, elige la opción Aplicación Flutter y presiona Siguiente.

Create Flutter project dialogCreate Flutter project dialogCreate Flutter project dialog

Ahora verás un formulario que solicita varios detalles sobre tu aplicación Flutter, como el nombre y la ubicación deseados. Asegúrate de escribir valores válidos en todos los campos.

Flutter project configuration dialogFlutter project configuration dialogFlutter project configuration dialog

El complemento Flutter no viene incluido con el SDK de Flutter. Por lo tanto, debes instalar el SDK por separado. Puedes hacerlo ahora presionando el botón Instalar SDK.

Dependiendo de la velocidad de tu conexión a Internet, la instalación puede tardar bastante en completarse. Una vez que tenga éxito, podrás presionar el botón Siguiente para completar la configuración del proyecto.

3. Agregando un punto de entrada

A lo largo de este tutorial, escribirás código dentro del archivo lib/main.dart. Contendrá, de forma predeterminada, algún código de muestra, que no necesitarás. Por lo tanto, elimina todo su contenido antes de continuar.

El framework Flutter utiliza el lenguaje de programación Dart, un lenguaje fácil de aprender cuya sintaxis es muy similar a la de Java y C. En consecuencia, como la mayoría de los programas independientes de Java y C, una aplicación Flutter también necesita una función main(), función especial que sirve como punto de entrada a la aplicación.

En consecuencia, agrega el siguiente código al archivo main.dart:

En este punto, puedes presionar Shift + F10 para compilar y ejecutar la aplicación. Si no encontraste ningún error en los pasos anteriores, deberías ver que la aplicación muestra un lienzo en blanco en tu dispositivo.

4. Usando widgets sin estado

Todas las aplicaciones de Flutter están compuestas por uno o más widgets, instancias de clases que te permiten dibujar texto e imágenes en la pantalla. Por lo general, no tendrás que programar ningún widget de bajo nivel desde cero porque el framework viene con una amplia variedad de hermosos widgets prefabricados que se adhieren a los lenguajes de diseño de las plataformas Android e iOS.

Para poder usar widgets básicos en tu aplicación, importa la biblioteca de widgets agregando el siguiente código al comienzo del archivo main.dart:

Los widgets más simples que puedes crear son widgets sin estado. Como habrás adivinado, no tienen ningún estado asociado y, por lo tanto, son estáticos. Son ideales para mostrar etiquetas, títulos y otros elementos de la interfaz de usuario cuyo contenido es poco probable que cambie mientras se ejecuta la aplicación. Para crear un widget sin estado, debes extender la clase StatelessWidget y sobrescribir su método build(). El siguiente código de muestra te muestra cómo:

Como puedes ver en el código anterior, el método build() debe devolver un objeto Widget. Eres libre de elegir y devolver cualquiera de las docenas de widgets prefabricados que ofrece Flutter. Por ejemplo, si deseas mostrar una línea de texto, puedes crear y devolver un widget de tipo Text como se muestra a continuación:

Ten en cuenta que siempre debes recordar especificar la direccionalidad de tu texto mientras usas un widget de tipo Text.

Sin embargo, si ejecutas la aplicación de inmediato, no podrás ver el texto. Eso es porque todavía no has creado una instancia de tu widget sin estado. Así que ve al método main(), crea una instancia del widget dentro de él y pásalo al método runApp(). Así:

En el momento en que agregues el código anterior y guardes tu proyecto, Android Studio debería recargar automáticamente la aplicación en tu dispositivo, lo que te permitirá ver el texto.

App showing textApp showing textApp showing text

Si deseas mostrar una imagen en lugar de texto, puedes simplemente reemplazar el widget Text con un widget Image dentro del método build() de tu clase. El siguiente código te muestra cómo crear un widget de tipo Image que obtiene y muestra una imagen remota:

Al guardar tu proyecto nuevamente, deberías ver algo como esto en tu dispositivo:

App showing an imageApp showing an imageApp showing an image

5. Creando árboles de widgets 

Todas las aplicaciones de Flutter se pueden considerar como árboles de widgets. La aplicación que creaste en el paso anterior es un árbol de widgets con un solo widget. Sin embargo, usar widgets de texto o imagen como elementos superiores del árbol de widgets no es una buena idea porque no podrás agregarles widgets secundarios.

Flutter ofrece varios widgets que pueden actuar como contenedores para otros widgets. Los más utilizados son los widgets Row y Column. Como sugieren sus nombres, el widget Row te permite colocar varios widgets uno al lado del otro, y el widget Column te ayuda a colocar los widgets uno debajo del otro. Son indispensables al crear árboles de widgets más profundos.

El siguiente código muestra cómo utilizar el widget Column para crear un árbol de widgets que tiene dos elementos secundarios: un widget de texto y un widget de imagen.

La aplicación ahora debería verse así:

App showing two widgetsApp showing two widgetsApp showing two widgets

Además, hay widgets que te ayudan a posicionar mejor un solo widget. Por ejemplo, el widget Center te ayuda a centrar un widget. Del mismo modo, el widget Container te permite agregar rellenos y márgenes a tus widgets.

El siguiente código te muestra cómo centrar el widget Column que acabas de crear incrustándolo dentro de un widget Center:

En el código anterior, ten en cuenta que el widget Column usa una propiedad adicional llamada mainAxisSize, cuyo valor se establece en min. Es necesario porque, antes de centrar una columna, debes hacer que su altura sea igual a la suma de las alturas de todos sus hijos. Sin la propiedad, el widget Column será tan grande como la pantalla del dispositivo y el widget Center no tendrá ningún efecto sobre él.

6. Usando widgets de Material Design

Durante todo este tiempo, has estado utilizando widgets básicos que forman parte de la biblioteca de widgets. Flutter tiene una biblioteca alternativa llamada material, que ofrece widgets de Material Design. Para usarlo en tu aplicación, reemplaza la declaración que importa la biblioteca de widgets con lo siguiente:

A continuación, para aplicar el estilo de Material Design a tus widgets, debes tener un widget MaterialApp en la parte superior de tu árbol de widgets. También debes incrustar todos los widgets que creaste anteriormente dentro de un widget Scaffold, que puede servir como la pantalla de inicio del widget MaterialApp.

Además, debido a que la mayoría de las aplicaciones de Material Design tienen una barra de aplicaciones, puedes configurar opcionalmente la propiedad appBar del widget Scaffold en un nuevo widget AppBar.

El siguiente código te muestra cómo hacer todo eso de manera concisa:

La aplicación debería verse mucho mejor ahora.

App displaying Material Design widgetsApp displaying Material Design widgetsApp displaying Material Design widgets

7. Usando widgets con estado

Los widgets sin estado son inmutables. Con el código que escribiste en los pasos anteriores, no hay una manera fácil de modificar el contenido del widget Text o del widget Image. ¿Por qué? Porque el framework Flutter prefiere la programación reactiva sobre la programación imperativa. En consecuencia, la mayoría de sus widgets no tienen métodos de establecimiento que puedan actualizar su contenido en tiempo de ejecución. Por ejemplo, el widget Text no tiene un método setText() que te permita cambiar el texto que muestras.

Los widgets con estado, por otro lado, son mutables, aunque no directamente. Dependen de los objetos State para decidir qué deben mostrar en una instancia determinada. Como tal, cada vez que cambias un objeto State, el framework actualizará automáticamente el contenido de cualquier widget con estado conectado a él.

Para crear un widget con estado, debes extender la clase StatefulWidget y anular su método createState().

A continuación, debes crear una nueva clase State personalizada que contenga variables que formen el estado del widget con estado. Además, dentro de la clase, debes anular el método build() para devolver tu árbol de widgets.

El siguiente código te muestra cómo crear una clase State que contenga una sola variable llamada url:

En aras de un ejemplo concreto, creemos ahora un árbol de widgets de Material Design que contiene un widget de tipo Image, que muestra una imagen aleatoria, y un widget de RaisedButton, que el usuario pueda presionar para cargar una nueva imagen aleatoria. El siguiente código te muestra cómo:

Ten en cuenta que el constructor del widget Image ahora toma la variable url como su entrada, en lugar de una cadena literal. Esto permite que el framework use el último valor de la variable cada vez que se dibuja el widget de imagen.

También ten en cuenta que el widget RaisedButton tiene un atributo onPressed que apunta a un detector de eventos llamado changeURL(). El método aún no existe, así que créalo.

Dentro del método, debes, por supuesto, cambiar el valor de la variable url. Sin embargo, no deberías cambiarlo directamente. Si lo haces, el framework de Flutter no será notificado del cambio. Para actualizar correctamente el estado de un widget con estado, siempre debes realizar todos los cambios dentro del método setState().

Por ahora, para mostrar imágenes aleatorias, te sugiero que utilices el servicio Unsplash Source. Todo lo que necesitas hacer para descargar una imagen aleatoria es realizar una solicitud HTTP a su URL y pasarle una cadena de consulta única.

El siguiente código te muestra cómo hacerlo usando una marca de tiempo para construir la cadena de consulta única:

En este punto, tu clase personalizada State está lista. Todo lo que necesitas hacer a continuación es crear una instancia y devolverla desde el método createState() de tu widget con estado.

Si pasas una instancia de tu widget con estado al método runApp(), vuelves a cargar la aplicación y presionas el botón varias veces, deberías ver que muestra una nueva foto cada vez.

App displaying random photosApp displaying random photosApp displaying random photos

Conclusión

Ahora sabes cómo trabajar con widgets sin estado y con estado en tus aplicaciones Flutter. También aprendiste cómo aplicarles un tema de Material Design, cambiar su contenido dinámicamente y hacerlos interactivos.

Vale la pena señalar que Flutter no usa los widgets nativos de ninguna plataforma móvil. Dibuja todos los widgets en sí, utilizando un motor de gráficos 2D de alto rendimiento llamado Skia, que usa la GPU de manera extensiva. Como resultado, las aplicaciones de Flutter a menudo se ejecutan a cerca de 60 fps y se sienten muy fluidas y receptivas.

Para obtener más información sobre los widgets en Flutter, consulta la documentación oficial.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.