De ListView a un GridView en Flutter, primeros pasos
Te mostraré como emplear el sistema de GridView en Flutter partiendo de un ListView.
Te voy a mostrar Cómo puedes migrar du viw a un grip viw y yo creo que la razón de esto sería sobre todo cuando tenemos una pantalla grande es decir no es un teléfono y en este caso queremos ir valga la redundancia de un ListView a un GridView para adaptar la cantidad de items en la pantalla en base al tamaño de la pantalla.
ListView
Tenemos un listado no importa aquí el nombre es un listado de cualquier cosa preguntamos por el y esto es para saber la cantidad de elementos que vamos a construir luego aquí tenemos el item builder en la cual recibimos el contesto no me interesa en este caso y la posición y aquí finalmente un widget que construye nuestro item en este caso que es esto que tenemos aquí esto no tiene mucha pérdida y es el mismo que estoy empleando por acá simplemente aquí algunas condiciones para
saber si la imagen existe:
ListView.builder(
itemCount: tutorialResponseModel.tutorials.length,
itemBuilder: (_, int position) {
return _itemTutorial(position, context);
}),Y demás ya eso es cuestión tuya una columna para bueno encolar nuestros elementos que en este caso es el título un espaciado y la imagen aquí le metí el ClipRRect para hacerle un redondeado en las esquinas por lo demás no tiene absolutamente nada de raro y un botoncito para ir a la acción a comprar o lo que sea esto lo podemos ampliar sin ningún cambio en ambos elementos si es un ListView o un GridView:
Widget _itemTutorial(int position, BuildContext context) {
final appModel = Provider.of<AppModel>(context, listen: false);
final tutorial = tutorialResponseModel.tutorials[position];
if (!tutorial.show) {
return const SizedBox();
}
String image = '';
if (tutorial.image != '') {
image = '${AcademyHelper.baseUrlImage}${tutorial.path}/${tutorial.image}';
}
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
tutorial.title.toUpperCase(),
style: Theme.of(context).textTheme.displayMedium,
),
const SizedBox(
height: 15,
),
image != ''
? ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image.network(
image,
errorBuilder: (context, error, stackTrace) =>
const SizedBox(),
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Container(
width: double.infinity,
height: 120,
color: Colors.grey,
);
},
),
))
: const SizedBox(),
const SizedBox(
height: 15,
),
Padding(
padding: const EdgeInsets.only(right: 15, left: 15),
child: Text(
truncate(tutorial.description),
style: Theme.of(context).textTheme.bodyMedium,
),
),
const SizedBox(
height: 15,
),
Text(
'${tutorial.priceOffers}\$',
style: Theme.of(context).textTheme.bodyLarge!.copyWith(
color: Colors.green, fontWeight: FontWeight.bold),
),GridView
Tal cual te mostraba entonces qué tenemos aquí en el GridView ya que sabemos qué es lo que tenemos aquí en el ListView:
GridView.builder(
shrinkWrap: true,
physics:
const BouncingScrollPhysics(), // evita problema de doble scroll
padding: const EdgeInsets.all(8),
itemCount: tutorialResponseModel.tutorials.length,
gridDelegate:
// SliverGridDelegateWithFixedCrossAxisCount(
// crossAxisCount: countItem,
// ),
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: countItem,
crossAxisSpacing: 8.0,
mainAxisExtent: 520,
mainAxisSpacing: 8.0),
itemBuilder: (_, position) {
return _itemTutorial(position, context);
})Y lo podemos comparar esto sería para hacerlo un poquito más eficiente tal cual te indica por acá esto sería un poco opcional pero en este caso como en varias vistas yo tengo doble scroll es decir por una parte en esta vista creo que no tengo pero si esto estoy empleando como elemento padre un single child scroll View y este también tiene su propio scroll entonces para evitar precisamente un problema con el doble scroll:
physics: const BouncingScrollPhysics(), // evita problema de doble scrollEsto es para definir el tamaño de nuestra celda del gripView:
mainAxisExtent: 520,Sería del elemento del item como lo quieras ver unos espaciados:
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0Para que no aparezcan todos pegados ya esto sería cuestión tuya personal y por aquí le pasamos la posición para que construya en base al listado que lo tenemos obviamente definido a nivel de la clase construye el elemento tal cual te mostraba aquí la parte creo que más resalta es el Main Access extended que es para indicar el tamaño de la celda:
mainAxisExtent: 520,Fíjate que por más que sea tiene más espacio aquí disponible de que están ocupando que creo que sería aquí lo recomendado porque cada celda tiene que a la final o cada fila tiene que estar alineada de esta forma Entonces esto lo hacemos Es definiéndole como quien dice aquí un tamaño mínimo que va a tener disponible si le pongo menos los problemas que vamos a tener es básicamente de overflow ya que ahora la celda o el cajón donde vamos a colocar nuestros elementos va a ser mucho más pequeño y vamos a tener todo este desastre que Inclusive la parte de contenido se arrastra hacia arriba cosa que obviamente no queremos entonces ahí tienes que jugar con el tamaño que tienes que colocarle obviamente esto sería opcional pero si no lo colocas vas a tener el problema que te acabo de mostrar fíjate que no da ningún bueno por aquí se da un error perdón obviamente aquí hay algunas cosas opcionales por ejemplo esta esto puedes buscar más información en internet y ver qué otros parámetros puedes configurarle pero por ejemplo aquí si no le colocas esta fíjate que no da ningún error pero te va a aparecer todo todo mochado ya que va a ocupar el espacio mínimo cosa que no queremos por lo comentado antes y bueno básicamente por lo que puedes ver que tenemos ahí un overflow entonces lo definimos y ya con eso solucionamos.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter