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!
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.
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.
ListView(
scrollDirection: Axis.horizontal,
children: const [
Text('hola soy el primer elemento'),
SizedBox(width:377, height:377),
Text('gracias por leer este articulo')
]
),
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.
ListView.builder(
itemBuilder: (context, index) => ElementTile(currentNumber: index)),
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.
ListView.separated(
itemBuilder: (context, index) => ElementTile(currentNumber: index),
itemCount: 20,
separatorBuilder: (BuildContext context, int index) => Container(
decoration: const BoxDecoration(color: Colors.black),
height: 8,
width: 8,
),
)
ListView.custom():
El constructor ListView.custom te permite construir una lista completamente personalizada, controlando tanto los elementos como el diseño de la lista. Es útil cuando necesitas un control total sobre cómo se construye y muestra cada elemento de la lista.
dartCopy code
ListView.custom({
Key? key,
required SliverChildDelegate childrenDelegate,
...
})
childrenDelegate: Un delegado que define cómo se construyen y posicionan los elementos en la lista. Puedes personalizar el comportamiento utilizando diferentes tipos de delegados, como SliverChildBuilderDelegate o SliverChildListDelegate.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: