blog
flutter desarrollo aplicaciones

Flutter. ¿Cómo desarrollar una APP? - Parte 2

Flutter. ¿Cómo desarrollar una APP? - Parte 2

En la semana pasada hicimos una pequeña introducción sobre cómo desarrollar una App en Flutter. Vimos cómo poder instalar un entorno de desarrollo para este framework de Dart. Además fuimos capaces de ejecutar la aplicación básica, que viene por defecto, en nuestro dispositivo Android.

Flutter. ¿Cómo desarrollar una APP? - Parte 2
Aplicación básica de Flutter que cuenta el número de clics en un botón

Hoy seguiremos con conceptos básicos y tocaremos un poco de código para ver las posibilidades del framework que te quiere hacer aletear (flutter). El código de Dart para nuestra aplicación vive principalmente en lib/main.dart. Este será el código que tocaremos, con el objetivo final de tener un listado de "pares de palabras" aleatorios en nuestra aplicación. ¡Vamos allá!

Cambiar títulos y cuerpo

Obviamente que tu aplicación no se llamará “Flutter Demo Home Page”, por lo tanto, para acostumbrarte al framework, en tu editor preferido, puedes substituir todo el código de lib/main.dart por el siguiente:

Flutter. ¿Cómo desarrollar una APP? - Parte 2
Función main con notación de flecha

Lo guardas, presionas la tecla “r” de tu teclado para el que se ejecute el “hot reload” y verás el resultado:

Flutter. ¿Cómo desarrollar una APP? - Parte 2
Aplicación con el código actualizado: "this is our first list"

Algunas consideraciones sobre el formato del código:

  1. El editor que utilizo, Atom, no está preparado nativamente para el código de Dart. Si quieres verlo "bonito", tendrás que instalar algunos de los paquetes disponibles en el repositorio. Yo utilizo el plugin Dart. ;)
  2. Es posible que el código, sobretodo si haces copiar&pegar, se vea con una  indentación sesgada. Si no estás usando Android Studio/ IntellliJ IDEA, ni VS Code, puedes ejecutar en terminal: flutter format main.dart.  Gracias a las herramientas de Flutter, la indentación estará arreglada de acuerdo con las buenas prácticas de Flutter.

¿Qué significa cada cosa en el código anterior?

Flutter viene ya con un conjunto importante de widgets de Material (design), y es muy recomendable aprovecharlo para tu nueva aplicación. También puedes ver que, como buena práctica, Flutter utiliza funciones flecha (=>) para métodos y funciones de una línea.

StatelessWidget y Scaffold

Como bien recuerdas, en Flutter todo es un widget. Por tanto, nuestra app extendiendo StatelessWidget se transforma también en un widget. El widget Scaffold pertenece igualmente a la biblioteca de Material, y es el que te proporciona el árbol de widgets para la pantalla “home”. Esta pantalla tiene su barra de aplicación, su título, y su cuerpo.

build()

El método build() es importante, pues describe cómo mostrar el widget en relación a otros widgets. Como puedes leer en el código, body también es un widget Center que contiene un widget hijo llamado Text. :)

Center y Text

El widget Center te permite alinear al centro el contenido y Text te da la posibilidad de mostrar el texto. Si entiendes esta estructura básica, será mucho más fácil escalar y desarrollar aplicaciones más complejas en Flutter.

¿Como combinar un widget Stateful con uno Stateless?

Los widgets stateless son inmutables, o sea, sus propiedades no se pueden cambiar. Por otro lado, los widgets stateful pueden mantener un estado que puede cambiar durante la durabilidad del widget.

En las siguientes líneas crearemos un listado de “scroll infinito” con la ayuda de un widget stateful y nuestro widget stateless creado anteriormente.

En el final de tu fichero lib/main.dart añades una nueva clase RandomWordsState:

Flutter. ¿Cómo desarrollar una APP? - Parte 2
Utilizamos la clase State especializada para RandomWords

El objetivo final de esta clase es el de generar "pares de palabras" que crecen de forma infinita mientras el usuario hace scroll.

Tal como has definido anteriormente, tu clase RandomWordsState depende de la clase RandomWords, por lo tanto debes añadirla también en el final de lib/main.dart.

Flutter. ¿Cómo desarrollar una APP? - Parte 2

Como puedes ver, RandomWords es un widget stateful (StatefulWidget). En este caso  lo único que hace es crear su clase State.

Como aún no hemos guardado, y tampoco estamos usando ningún IDE, no somos conscientes de ningún error de complicación. Pero la clase RandomWordsState necesitará el método build(). build() , como hemos visto anteriormente será responsable por generar en un widget Text nuestros pares de palabras. Debes actualizar tu clase RandomWordsState para que plasme lo siguiente:

Flutter. ¿Cómo desarrollar una APP? - Parte 2
asPascalCase, “Pascal case” es equivalente al “upper camel case”

Además, en la clase MyAPP agregamos el widget hijo (child) RandomWords. Si guardas lib/main.dart ahora, y presionas “r” para el “hot reload”, ¡no verás palabras aleatorias en inglés, como esperabas!

Tu compilador reclamará con varios mensajes de error. Uno de estos errores te dirá que WordPair en la clase RandomWordsState no está definido. Lo que pasa es que WordPair pertenece a unas bibliotecas externas que no hemos instalado.

¿Cómo solucionarlo?

pubspec

Solucionarlo es relativamente simple. Antes de declarar las clases RandomWords y RandomWordsState, lo que debes hacer es utilizar el paquete english_words y declararlo en el fichero responsable por gestionar los assets y las dependencias de una aplicación de Flutter: pubspec.

Editas el fichero pubscpec.yaml y añades english_words en el listado de dependencias con la versión que necesites.

Flutter. ¿Cómo desarrollar una APP? - Parte 2

Lo guardas. Como no estamos usando Android Studio necesitas ejecutar el comando “flutter pub get” en terminal para integrar el paquete english_words en tu nuevo proyecto. A partir de este momento el fichero pubspec.lock se auto-genera con un listado de todos los paquetes y sus versiones en el proyecto.

Ahora ya puedes importar english_words y utilizar sus clases, métodos y funciones.

Flutter. ¿Cómo desarrollar una APP? - Parte 2

Listado con scroll infinito

Utilizaremos un widget de tipo “ListView” para listar nuestros pares de palabras. Este listado crecerá infinitamente mientras en usuario hace scroll.

Sin entrar en detalle en este momento, tu clase RandomWodsState en lib/main.dart debe ser actualizada de la siguiente forma:

Flutter. ¿Cómo desarrollar una APP? - Parte 2

Y debes actualizar el método build() de RandomWordsState para que utilice _buidSuggestions().

¡Seguro que te has fijado en las funciones con un underscore! En Dart, utilizar un underscore como prefijo sirve para asegurar la privacidad del identificador en su biblioteca.

Otros lenguajes utilizan public, protected y private, por ejemplo. Si también te has fijado en final, esta es una forma de declarar una función que solo se puede iniciar una vez y nunca se cambiará.

También deberás actualizar el método build() de la clase principal MyApp, cambiando el título y el widget de home:

Flutter. ¿Cómo desarrollar una APP? - Parte 2

Lo guardas, presionas la tecla “r” y podrás ver tu nuevo listado infinito de nombres de Startup!

Flutter. ¿Cómo desarrollar una APP? - Parte 2
Listado de pares de palabras en Pascal Case

Conclusión

El objetivo de estos dos últimos artículos sobre Flutter es el de ayudarte a tener una visión básica y global de lo que puede ser desarrollar una aplicación móvil con el framework de Google.

Con esto espero haberte ayudado a ti y a tus desarrolladores a decidir si vale realmente la pena empezar un nuevo proyecto con este “nuevo” framework, o si de momento es mejor seguir creando aplicaciones con React Native. Una buena decisión en este sentido tendrá un impacto importante en todo tu negocio.

El código utilizado en este artículo pertenece al equipo de Flutter y lo puedes consultar en su codelabs.

¿Te estás planteando cambiar de React Native a Flutter? ¿Por qué?

Fotografía: Gerhard Gellinger en Pixabay

Fuente: https://flutter.dev/docs/get-started/codelab

Flutter. ¿Cómo desarrollar una APP?

Artículo anterior

Flutter. ¿Cómo conectar con WordPress?

Siguiente artículo
I help Organizations to use Technology to improve people's lives

También te puede interesar

Flutter. ¿Cómo conectar con WordPress?

Flutter. ¿Cómo conectar con WordPress?

Flutter. ¿Cómo conectar con WordPress?

Flutter. ¿Cómo conectar con WordPress?