En Flutter, ListView es un widget que es empleado oara mostrar un conjunto de elementos en una lista. ListView es un widget extremadamente flexible y permite mostrar una variedad de formatos así como listas en formato horizontal o vertical, con elementos personalizados o estándar. Además, ListView tiene un alto rendimiento y es ideal para grandes conjuntos de datos, ya que solo carga los elementos que se muestran actualmente en la pantalla.
Crear un listview
Para crear un ListView en Flutter, primero necesita un conjunto de datos sobre el que construir la lista. Luego, puede usar el widget ListView.builder para construir la lista dinámicamente según sea necesario, proporcionándole los elementos necesarios para mostrar en la lista a medida que el usuario se desplaza por ella:
ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(items[index]),
);
},
);En este ejemplo, items es una lista de elementos que se mostrarán en la lista, y para cada uno de ellos se creará un ListTile, que contiene un título que muestra el texto del elemento.
Este es solo un ejemplo básico, hay muchas otras opciones y personalizaciones disponibles para ListView en Flutter.
Animado
Las animaciones son fundamentales en cualquier aplicación que construimos hoy en dia, dotar a la aplicación para mostrar cambios suaves o transiciones entre un estado a otro es algo normal; en los listados mediante los ListView en Flutter la cosa cambia un poco, ya que, los listados por su comportamiento, de iniciar la animación al aparecer un item en pantalla, se vuelve más complicado realizar dicha labor.
Existen muchas formas de animar un listado; pero, para mantenerlo simple, vamos a usar el siguiente paquete:
https://pub.dev/packages/delayed_display
Instalamos el paquete con:
pubspec.yaml
dependencies:
flutter:
sdk: flutter
syncfusion_flutter_datepicker:
delayed_display:El cual, permite agregar retrasos o delay el widget que sea embebido por el widget de DelayedDisplay(); además de esto, podemos especificar una sencilla animación tipo "fade In" la cual podemos personalizar la dirección de la animación indicando el eje por donde inicia el efecto; por ejemplo, si lo queremos de izquierda a derecha:
slidingBeginOffset: const Offset(-1, 0)O viseversa (derecha a izquierda):
slidingBeginOffset: const Offset(1, 0)De arriba a abajo:
slidingBeginOffset: const Offset(0, -1)O viseversa (de abajo a arriba):
slidingBeginOffset: const Offset(0, 1)Puedes personalizar otros aspectos como la curva de la animación entre otros detalles que puedes revisar en la documentación oficial.
Finalmente, usaremos el widget mencionado:
ListView.builder(
itemCount: 50,
itemBuilder: ((context, index) => DelayedDisplay(
delay: const Duration(milliseconds: 5),
slidingBeginOffset: const Offset(-1, 0),
fadeIn: true,
child: Card(***)- slidingBeginOffset, especificamos la curva de la animación mediante el Offset, el cual recibe la posición X y Y que son los factores tomados en cuenta para realizar el efecto de desplazamiento.
- fadeIn, habilita o deshabilita el efecto fade in.
- delay, indica el retraso en la animación.
Recuerda que esta publicación forma parte de mi curso completo sobre Flutter.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter