Flutter — Widget GridView

2024-02-21T18:00:00-05:00 | 3 minutos de lectura | Actualizado en 2025-01-24T07:42:46-05:00

jaimetellezb

Tabla de Contenido

Tabla de Contenido
Introducción
Conclusión
Referencias

Introducción

Ya vimos los ListView que se encargan de manejar listas secuenciales de forma vertical casi siempre pero también de forma horizontal se puede configurar su desplazamiento. En este caso veremos los GridView, que son widgets que nos permiten manejar listas en cuadrículas.

GridView

Este widget permite crear listas con diseño de cuadrículas, los que más se usan son GridView.count y GridView.extent para listas de tamaño fijo.

Constructores

GridView este constructor es usado para una lista pequeña de elementos los cuales van dentro del gridDelegate .
GridView.builder es usado para listas de cuadrículas grandes. Las propiedades gridDelegate y itemBuilder son obligatorias. En gridDelegate podemos proporcionar la cantidad de elementos en una misma fila o columna dependiendo de la dirección, con la propiedad crossAxisCount . En el itemBuilder se construye cada uno de los elementos que vamos a mostrar. También es importante agregar la propiedad itemCount para saber la cantidad de elementos a mostrar.
GridView.count es otro constructor que que de entrada le podemos proporcionar la cantidad de columnas que queremos mostrar en la propiedad requerida crossAxisCount y una lista de widgets en children .
GridView.custom es un constructor personalizado y tiene como propiedades requeridas gridDelegate y childrenDelegate .
GridView.extent es un constructor de se extiende hasta el máximo eje transversal y tiene las propiedades requeridas maxCrossAxisExtent y children .

Propiedades más usadas

key identificador del widget dentro del árbol de widgets.
childrenDelegate un delegate que proporciona los elementos dentro de un GridView.
controller se puede utilizar para controlar algunas características de GridView.
gridDelegate un delegate que controla el diseño de los elementos dentro del GridView.
padding la cantidad de espacio para agregar el widget hijo dentro.
physics controla como se va a realizar el desplazamiento del GridView.
reverse cambia la dirección en que se muestran los elementos dentro del widget, por defecto es de arriba hacia abajo.
scrollDirection dirección del desplazamiento del GridView, puede ser horizontal o vertical, por defecto es vertical.
shrinkWrap limita el espacio de movimiento de los elementos del GridView a la cantidad que se puedan ver.

Ejemplo

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GridView.count(
        crossAxisCount: 3,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        primary: false,
        children: [
          Container(
            height: 100,
            color: Colors.yellow,
          ),
          Container(
            height: 100,
            color: Colors.yellow,
          ),
          Container(
            height: 100,
            color: Colors.yellow,
          ),
          Container(
            height: 100,
            color: Colors.blue,
          ),
          Container(
            height: 100,
            color: Colors.blue,
          ),
          Container(
            height: 100,
            color: Colors.blue,
          ),
          Container(
            height: 100,
            color: Colors.red,
          ),
          Container(
            height: 100,
            color: Colors.red,
          ),
          Container(
            height: 100,
            color: Colors.red,
          ),
        ],
      ),
    );
  }
}