Aleteo – GridView

Flutter GridView es un widget que es similar a una array 2-D en cualquier lenguaje de programación. Como sugiere el nombre, un Widget de GridView se usa cuando tenemos que mostrar algo en una cuadrícula. Podemos mostrar imágenes, texto, iconos, etc. en GridView. Podemos implementar GridView de varias maneras en Flutter:

• GridView.contar()
• GridView.constructor()
• GridView.personalizado()
• GridView.extensión()

Constructor de GridView:

GridView(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required SliverGridDelegate gridDelegate,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List<Widget> children: const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
Clip clipBehavior: Clip.hardEdge,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId}
)

Constructor de GridView.builder:

GridView.builder(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required SliverGridDelegate gridDelegate,
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Constructor de GridView.count:

GridView.count(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required int crossAxisCount,
double mainAxisSpacing: 0.0,
double crossAxisSpacing: 0.0,
double childAspectRatio: 1.0,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List<Widget> children: const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Constructor de GridView.custom:

const GridView.custom(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required SliverGridDelegate gridDelegate,
@required SliverChildDelegate childrenDelegate,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Constructor de GridView.extent:

GridView.extent(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required double maxCrossAxisExtent,
double mainAxisSpacing: 0.0,
double crossAxisSpacing: 0.0,
double childAspectRatio: 1.0,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List<Widget> children: const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Propiedades de GridView:

• ancla: esta propiedad toma un valor doble como objeto para controlar el efecto de desplazamiento cero.
• childrenDelegate: sliverChildDelegate es el objeto de esta propiedad. Proporciona un delegado que sirve a los niños para GridView.
• clipBehaviour: esta propiedad toma Clip enum como el objeto para decidir si el contenido en GridView se recortará o no.
• controlador: esta propiedad contiene la clase ScrollController como el objeto para controlar la posición de la vista de desplazamiento.
• dragStartBehaviour: esta propiedad toma la enumeración DragStartBehavior como el objeto. Controla la forma en que funciona el comportamiento de arrastre.
• gridDelegate: la clase SliverGridDelegate es el objeto de esta propiedad. Es responsable del delegado que maneja el diseño del widget secundario en GridView .

GridView.count() es uno que se usa con frecuencia y se usa cuando ya sabemos el tamaño de las cuadrículas. Siempre que tenemos que implementar GridView dinámicamente, usamos GridView.builder(). Ambos son como una array normal y una array dinámica. En Flutter, los dos GridView se usan principalmente.

GridView.count() se usa con algunos parámetros con nombre. Las propiedades que podemos usar con GridView.count() son: 

• crossAxisCount: Define el número de columnas en GridView.
• crossAxisSpacing: Define el número de píxeles entre cada hijo enumerado a lo largo del eje transversal.
• mainAxisSpacing: Define el número de píxeles entre cada hijo enumerado a lo largo del eje principal.
• padding(EdgeInsetsGeometry): Define la cantidad de espacio para rodear toda la lista de widgets.
• primario: si es verdadero, su ‘Controlador de desplazamiento’ se obtiene implícitamente por el marco.
• scrollDirection: Define la dirección en la que se moverán los elementos en GridView, por defecto es vertical.
• reverse: si se establece en true, simplemente invierte la lista de widgets en dirección opuesta a lo largo del eje principal.
• física: determina cómo se comporta la lista de widgets cuando el usuario llega al final o al inicio del widget mientras se desplaza.
• ShrinkWrap: de forma predeterminada, el valor es falso, entonces la lista desplazable ocupa tanto espacio para desplazarse en la dirección de desplazamiento, lo que no es bueno porque requiere memoria, lo que es un desperdicio de memoria y el rendimiento de la aplicación se reduce y puede generar algún error, así que para evitar fuga de memoria mientras nos desplazamos, envolvemos nuestros widgets secundarios usando ShrinkWrap configurando ShrinkWrap en verdadero y luego la lista desplazable será tan grande como lo permitan sus widgets secundarios.

import 'package:flutter/material.dart';
 
void main() {
  runApp(GeeksForGeeks());
}
 
class GeeksForGeeks extends StatelessWidget {
 
  // This widget is the root of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          backgroundColor: Colors.blueGrey[900],
          title: Center(
            child: Text(
              'Flutter GridView Demo',
              style: TextStyle(
                color: Colors.blueAccent,
                fontWeight: FontWeight.bold,
                fontSize: 30.0,
              ),
            ),
          ),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          crossAxisSpacing: 10.0,
          mainAxisSpacing: 10.0,
          shrinkWrap: true,
          children: List.generate(20, (index) {
              return Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage('img.png'),
                      fit: BoxFit.cover,
                    ),
                    borderRadius:
                    BorderRadius.all(Radius.circular(20.0),),
                  ),
                ),
              );
            },),
        ),
      ),
    );
  }
}

Producción:

Demostración de Flutter GridView