ListView

ListView en Flutter: Un recorrido visual por tus datos

El widget ListView es uno de los más fundamentales en Flutter, ya que te permite mostrar una lista de elementos de forma vertical u horizontal. Es ideal para presentar conjuntos de datos de cualquier tipo, desde simples textos hasta elementos más complejos que incluyan imágenes, botones y otros widgets.

Características principales:

• Flexibilidad: Se adapta a diferentes tamaños de pantalla y orientaciones.
• Personalización: Puedes personalizar la apariencia de cada elemento de la lista, así como la propia lista.
• Rendimiento: Flutter optimiza la renderización de listas largas, asegurando una experiencia fluida.
• Tipos:
  • ListView.builder: Ideal para listas largas o dinámicas, ya que construye los elementos sobre la marcha.
  • ListView.separated: Similar a ListView.builder, pero permite agregar separadores entre los elementos.
  • ListView.custom: Ofrece un control total sobre la construcción de la lista.

Ejemplo básico: Lista de textos

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext    context) {
    final List<String> items    = ['Apple', 'Banana', 'Orange', 'Grape'];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ListView Example'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),   
            );
          },
        ),
      ),
    );
  }
}

Ejemplo más avanzado: Lista de productos con imágenes

Dart

import 'package:flutter/material.dart';

class Product {
  final String name;
  final String image;
  final double price;

  Product(this.name,    this.image, this.price);
}

// ... (resto del código)

ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Image.network(products[index].image),
      title: Text(products[index].name),   
      subtitle: Text('\$${products[index].price}'),
    );
  },
)

Personalización avanzada:

• ScrollDirection: Cambia la dirección del scroll (vertical u horizontal).
• padding: Agrega espacio alrededor de los elementos.
• itemExtent: Define una altura fija para cada elemento.
• shrinkWrap: Hace que la lista se ajuste al tamaño de sus hijos.
• reverse: Invierte el orden de los elementos.

Casos de uso comunes:

• Listas de productos en una tienda en línea.
• Chats de mensajería.
• Listas de contactos.
• Galerías de imágenes.
• Menús desplegables.

En resumen:

ListView es una herramienta poderosa y versátil en Flutter que te permite crear interfaces de usuario atractivas y eficientes. Al dominar sus características y combinarlo con otros widgets, podrás construir aplicaciones móviles de alta calidad.