Un ListView es un widget en Flutter que se utiliza para construir una lista de widgets desplazables, donde los elementos se agregan dinámicamente a medida que se desplaza la lista. ListView es una herramienta poderosa para mostrar una gran cantidad de datos en una aplicación Flutter. Además, Flutter proporciona varios tipos de ListView para satisfacer diferentes necesidades y casos de uso, como ListView.builder, ListView.separated, ListView.custom, entre otros. En resumen, ListView es un componente esencial en la construcción de interfaces de usuario en Flutter y se utiliza para mostrar una lista de datos de manera eficiente y dinámica; un ejemplo base de un ListView:
ListView.builder(
itemCount: 100, // número de elementos en la lista
itemBuilder: (BuildContext context, int index) {
// construir el elemento de la lista
return ListTile(
title: Text('Elemento $index'),
);
},
),En este ejemplo, utilizamos el constructor ListView.builder para construir una lista de 100 elementos. El parámetro itemCount indica el número de elementos que se mostrarán en la lista.
El parámetro itemBuilder especifica cómo construir cada elemento de la lista. En este caso, utilizamos un ListTile para cada elemento, con un título de texto que muestra el índice del elemento.
Este es solo un ejemplo sencillo, pero hay muchas formas posibles de personalizar y utilizar listas en Flutter, como agregar separadores, encabezados, pies de página, entre otros.
Vamos a conocer un widget fundamental para cualquier tipo de aplicación moderna en la cual queramos mostrar un conjunto de datos de manera organizada mediante una lista con scroll; este estupendo widget se conoce como el ListView y es similar al RecylverView de Android Studio pero más básico y sin optimización para listados largos pero mucho más sencillo de implementar que en Android con Kotlin/Java.
El código para implementar el mismo es así de simple:
ListView( children: <Widget>[ Text("Item ListView 1"), Text("Item ListView 2"), Text("Item ListView 3"), Text("Item ListView 4") ], )Como puedes ver, simplemente es un widgets llamado ListView que como viene siendo lo clásico o lo normal en esta clase de widget recibe una lista de widgets que pueden ser cualquier cosa, en este caso lo más sencillo en Flutter, que sería un widget de tipo texto.
Revertir lista + Scroll vertical/horizontal + bloquear scroll en el ListView
Hay muchas configuraciones que podemos realizar sobre el ListView mediante las propiedades, para indicar que queremos aplicar scroll en el eje horizontal o vertical, también podemos bloquear el scroll si necesitas hacer esto por algún motivo o revertir una lista; todo esto mediante una sola propiedad y por lo tanto mediante una línea de código.
Podemos configurar múltiples aspectos de nuestra lista, por ejemplo si quieres revertir los items, para eso empleamos la propiedad reverse, si quieres el scroll de manera vertical:
scrollDirection: Axis.vertical
U horizontal:
scrollDirection: Axis.horizontal
Si queremos bloquear el scroll en nuestra lista y quede fija en los primeros elementos:
physics: NeverScrollableScrollPhysics(),
Pero por supuesto una lista de elementos fijos no nos sirve de absolutamente nada, la idea es hacer una lista dinámica de elementos; esto es ideal si nos conectamos a una Api Rest.
O un sistema similar, pero para poner todo simple, crearemos una función con un ciclo for que cree elementos de manera dinámica:
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: ListView(
children: generateItem(),
addAutomaticKeepAlives: false,
scrollDirection: Axis.vertical,
)
// This trailing comma makes auto-formatting nicer for build methods.
);
}
List<Widget> generateItem(){
final list = List<Widget>();
for (var i = 0; i <= 100; i++) {
list.add(Text("Item ListView "+i.toString()));
}
return list;
}
También podemos colocar un divisor entre los elementos o items de nuestro widget de ListView:
for (var i = 0; i <= 100; i++) {
list.add(Text("Item ListView "+i.toString()));
list.add(Divider());
}
Problema con el widget de ListView
El problema con el ListView tal cual lo implementamos, es que no está optimizado para trabajar con listas muy grandes, o listas dinámicas; recordemos que los ListView en Android básico fueron "reemplazados" en cierta medida por el RecyclerView los cuales ofrecen un desempeño excelente para grandes listas de elementos, ya que "reciclar" los items de vistas que no vemos y los vuelve a reutilizar en el resto del listado que vaya apareciendo o consumiendo bajo demanda del usuario.
Y con esto concluimos el uso del ListView al menos en su uso básico, pero recuerda que existe muchas más propiedades y variantes de este listado que iremos viendo a posterior.
Recuerda siempre revisar la documentación oficial en Flutter ListView.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter