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.
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:
Lo guardas, presionas la tecla “r” de tu teclado para el que se ejecute el “hot reload” y verás el resultado:
Algunas consideraciones sobre el formato del código:
- 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. ;)
- 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:
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.
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:
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.
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.
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:
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:
Lo guardas, presionas la tecla “r” y podrás ver tu nuevo listado infinito de nombres de Startup!
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
