GridView

GridView en Flutter: Organizando tus datos en una cuadrícula

El widget GridView es ideal cuando quieres presentar una lista de elementos de forma visualmente atractiva, organizándolos en una cuadrícula. Es perfecto para mostrar galerías de imágenes, catálogos de productos, o cualquier conjunto de datos que se beneficie de una disposición en filas y columnas.

Características principales:

• Flexibilidad: Puedes personalizar el número de columnas, el espaciado entre elementos y la dirección de desplazamiento.
• Rendimiento: Flutter optimiza la renderización de GridView, incluso para listas grandes.
• Personalización: Puedes personalizar la apariencia de cada celda de la cuadrícula.
• Tipos:
  • GridView.count: Crea una cuadrícula con un número fijo de columnas.
  • GridView.extent: Crea una cuadrícula donde las celdas tienen un tamaño máximo en una dimensión.
  • GridView.custom: Ofrece un control total sobre la construcción de la cuadrícula.

Ejemplo básico: Galería de imágenes

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> imageUrls    = [
      'https://picsum.photos/200',
      'https://picsum.photos/200',
      // ... más URLs de imágenes
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GridView Example'),
        ),
        body: GridView.count(
          crossAxisCount: 3,
          children: imageUrls.map((url) => Image.network(url)).toList(),
        ),
      ),
    );
  }
}

Ejemplo más avanzado: Catálogo de productos

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)

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  itemCount:    products.length,
  itemBuilder: (context, index) {
    return Card(   
      child: Column(
        children: [
          Image.network(products[index].image),
          Text(products[index].name),
          Text('\$${products[index].price}'),
        ],
      ),
    );
  },
)

Personalización avanzada:

• childAspectRatio: Define la relación entre el ancho y el alto de cada celda.
• mainAxisSpacing: Define el espacio entre las filas.
• crossAxisSpacing: Define el espacio entre las columnas.
• padding: Agrega espacio alrededor de la cuadrícula.

Casos de uso comunes:

• Galerías de imágenes: Para mostrar una colección de imágenes de forma ordenada.
• Catálogos de productos: Para presentar productos en una tienda en línea.
• Tableros de control: Para organizar elementos de control en una interfaz.

En resumen:

GridView es un widget muy útil en Flutter para crear interfaces de usuario atractivas y fáciles de navegar. Al dominar sus características y combinarlo con otros widgets, podrás construir aplicaciones móviles más dinámicas y profesionales.