ListView.Builder en Flutter

ListView.Builder básico con lista de elementos

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView.Builder Example',
      home: const ListViewExample(),
    );
  }
}

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

  // Lista de datos de ejemplo
  final List items = [
    'Manzana', 'Banana', 'Naranja', 'Uva', 'Fresa',
    'Piña', 'Mango', 'Pera', 'Kiwi', 'Sandía',
    'Melón', 'Durazno', 'Cereza', 'Limón', 'Lima'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lista de Frutas'),
        backgroundColor: Colors.green,
      ),
      body: ListView.builder(
        itemCount: items.length, // Número total de elementos
        itemBuilder: (context, index) {
          // Este builder se llama solo para los items visibles
          final fruit = items[index];
          final color = index % 2 == 0 ? Colors.green[50] : Colors.white;
          
          return Container(
            margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 8),
            decoration: BoxDecoration(
              color: color,
              borderRadius: BorderRadius.circular(8),
            ),
            child: ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.green[100],
                child: Text(
                  '${index + 1}',
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.green,
                  ),
                ),
              ),
              title: Text(
                fruit,
                style: const TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                ),
              ),
              subtitle: Text('Fruta número ${index + 1}'),
              trailing: const Icon(Icons.chevron_right, color: Colors.green),
              onTap: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('Seleccionaste: $fruit'),
                    duration: const Duration(seconds: 1),
                  ),
                );
              },
            ),
          );
        },
      ),
    );
  }
}