Scrollable Widgets 📲 ¿Cuándo y cómo utilizarlos? Una guía práctica 📖

Cuando hacemos vistas en Flutter deseamos utilizar las herramientas correctas para lograr los mejores resultados posibles. Sin embargo, cuando hablamos de vistas con desplazamiento horizontal o vertical tenemos muchas alternativas en Flutter.

¿Te gustaría tener una guía para saber cuándo es bueno aplicar un widget u otro? En este artículo, espero poder ayudarte a que tengas esa guía práctica para saber qué camino tomar dependiendo de tu necesidad. Así que ¡manos a la obra!

ListView

En primer lugar cuando pensamos una lista de elementos con desplazamiento la primera alternativa que nos encontramos es el Listview. El cual es uno de los componentes más conocidos de Flutter, consiste en una lista de widgets alineados que permite el desplazamiento horizontal o vertical de sus hijos.

El Listview cuenta con cuatro constructores 🤯

El constructor por defecto: Recibe una lista explícita de widgets, este constructor tomará cada uno de sus hijos y los construirá aún cuando ellos no sean visibles 😥. Esto es malo porque no quieres que se carguen elementos que el usuario no haya visto aún, deseas que los componentes visuales se generen a medida que el usuario interactúe con la aplicación, por eso deberías utilizar este tipo de constructor solo cuando sea una pequeña cantidad de elementos a mostrar.

Cómo vemos en el ejemplo anterior, con tan solo editar la propiedad scrollDirection es modificado la orientación del ListView.

ListView.builder(): Recibe un IndexedWidgetBuilder y construye los elementos por demanda. Esto quiere decir que los elementos son generados únicamente cuando sean visibles en pantalla. Es decir que este constructor es ideal para listas largas o infinitas.

En el código se ve un widget llamado ElementTile, este lo construimos para el ejemplo. El cual representa el widget que se dibujaría por cada iteración, la idea es que tengas un componente asociado a los elementos de la lista, por lo general están asociados a una entidad. Por dar un escenario, ante la lista de álbumes tendrías un widget para dibujar un álbum con la información recibida (una modelo con sus atributos) y este sería el elemento que construiría el itemBuilder.

ListView.separated() : recibe dos IndexedWidgetBuilders: itemBuilder y seperatorBuilder. El ítem builder es empleado para construir un widget basado en el índice de la lista construida y el separador builder define un widget intermedio el cual se utilizará para separar los elementos de la lista. Este tipo de constructor suele ser muy útil cuando deseas dibujar una lista de elementos separados por un widget.

GridView

En ocasiones deseamos crear una cuadricula que permita el desplazamiento de los elementos, para este escenario en Flutter nos proporcionan los GridView:

Los constructores que tiene el GridView son similares a los del ListView por dar un caso el GridView.builder () se ve de la siguiente forma:

Lo únicamente diferente es el gridDelegate el cual es el encargado de administrar el espaciado y la cantidad de columnas. Existen dos delegados que Flutter te otorga por defecto :

SliverGridDelegateWithFixedCrossAxisCount: Crea un diseño que tiene un número fijo de mosaicos a lo largo del eje transversal (cross axis).

SliverGridDelegateWithMaxCrossAxisExtent: Crea un diseño con mosaicos que tienen una extensión de eje transversal (cross axis) máxima.

Ahora, ¿cómo funciona el cross y el main axis?

Las columnas y las filas dentro del GridView son similares al ListView pero sin scroll. Por lo tanto, el main axis representará la dirección del scroll. Por ejemplo, si el scroll es horizontal se puede asemejar a un Row y el main axis sería el siguiente:

si el scroll es vertical se puede asemejar a un Column y el main axis sería el siguiente:

Listas anidadas

En algunas ocasiones nos puede interesar tener una lista anidada como la que se muestra en el siguiente escenario:

En este caso tenemos tres elementos scrollables la pantalla principal, la lista horizontal y la lista vertical. Puede ser que en un inicio nos planteemos la posibilidad de crear un ListView normal y adentro dos de sus hijos serían otros ListViews. Sin embargo, esto tiene serias consecuencias en el performance, pues aunque utilices un ListView.builder necesitará de construir todos los elementos antes de mostrarlos al usuario. Por eso, cuando tengas listas anidadas incluyendo los GridViews. Deberías utilizar los CustomScrollView. A continuación un ejemplo :

El CustomScrollView también admitirán una lista de entrada, en este caso de Slivers. Con esta estrategia puedes construir listas anidadas con grandes números de elementos, los cuales serán construidos a medida que el usuario explore los elementos en pantalla. ⚠️¡Advertencia!, el ListViews con scrolling horizontal al utilizar su constructor tradicional solo se debe usar con pocos elementos, en caso de requerir varios puedes recurrir al SliverList expuesto en el código.

El CustomScrollView También te permite ocultar cierta información que desees mostrar solo al comienzo y se oculte a medida que el usuario interactué con la pantalla al hacer scrolling como se muestra en la imagen de la izquierda.

PageView

Si necesitas navegar entre pantallas haciendo scrolling , puedes utilizar el PageView.

Cómo se ve en el código, no resulta difícil utilizarlo y al igual que en los casos anteriores con solo configurar una propiedad podemos cambiar la dirección del scrolling.

Conclusión

Existen muchos widgets scrolleables listos para utilizarlos, solo debemos escoger las herramientas adecuadas para cada una de nuestras necesidades 🛠. Por favor, deja un comentario si te gustó este artículo y unos 34+x 👏. Por cierto, te dejo el enlace a un repositorio donde implementamos todos estos ejemplos.

Un abrazo grande y un feliz día.