Flutter Pokedex — FlutterDex

4 min readMay 26, 2022

¡Hola a tod@s!

En este post voy a mostrar como crear una simple y divertida Pokedex en Flutter 3.0. La FlutterDex.

Particularmente, me voy a centrar en la obtención de los datos y la construcción de la UI. Próximamente, contaré acerca del manejo de estados de la misma utilizando el paquete flutter_riverpod.

ALGUNOS DATOS

La UI esta inspirada en el diseño de Taras Migulko, Art place app.
Los pokemon fueron obtenidos desde PokeApi.
Estructura de los datos a través de QuickType.
El Theme fue generado utilizando Panache.

LIBRERIAS QUE SE UTILICÉ

Para el consumo de datos se utilizó dio.
Para los efectos de sombras internas, flutter_inset_box_shadow.
Para el manejo de estados con flutter_riverpod.
Para el enrutamiento a través de vrouter.

AHORA SÍ ¡EMPECEMOS!

Lo primero, y no menos importante que hago al comenzar este o cualquier desarrollo es estructurar mi proyecto.

No voy a entrar en el detalle de que contiene cada una de las carpetas, creo que esta bastante claro 😅. Por el momento, solo voy presentarla para no extender demasiado el post.

Una vez estructurado el proyecto, me gusta continuar con la obtención y parseo de los datos. De esta manera, me aseguro de tener la información necesaria para construir la UI, y así también evitar futuros problemas entre ambas partes.

Como mencioné anteriormente, los datos fueron obtenidos desde PokeApi utilizando la librería dio.

PokeApi nos provee el endpoint https://pokeapi.co/api/v2/pokemon?limit=20&offset=0, con el que obtenemos la siguiente respuesta:

Siendo results

Entonces…. ¡¿Donde están los pokemon?!

En nuestra UI vemos datos como el nivel de experiencia, la altura, la imágen, etc., datos que no observamos directamente en el result. ¡Exacto! estan dentro de cada una de estas url. 😑

Es por esto, que decidí crear 2 entidades:

Siendo Pokemons

y Pokemon

Ahora si, una vez obtenidos los pokemon, recorrí esta lista de results (o como los declare, PokemonResult) y los almacene en una nueva lista de pokemon (List<Pokemon>), la cual contiene todos los datos necesarios para la UI.

¡Excelente!. Ya tenemos nuestros pokemon esperando para ser mostrados.

¡Comencemos con la UI!

La misma se separa en 2 widgets. Un carrusel, que muestra la imágen del pokemon, un titulo con el nombre del pokemon actual, y debajo, una card con texto informativo.

Vamos por el carrusel.

Utilicé un PageView.builder(), el cual con la cantidad de pokemon obtenidos desde la API, dibuja cada uno de sus hijos a través de ItemPokemonWidget.

La animación que se observa en el GIF al comienzo del post, no es más que este AnimatedContainer, reaccionando al cambio de estado de la variable pokemonCreated.

Un detalle que no quiero dejar pasar, ya que fue entretenido desarrollarlo 😁, son las sombras internas del carrusel, esas que dan la sensación de hoyo o cuadro de arte.

Gracias a la librería flutter_inset_box_shadow, que agrega la propiedad inset en los BoxShadow, de manera más que sencilla, pudé utilizar las sombras dentro del contenedor.