As listas e cuadrículas son compoñentes esenciais en calquera aplicación móbil, xa que permiten mostrar grandes cantidades de datos dun xeito organizado e eficiente. Flutter ofrécenos varios widgets para xestionalos.
📃 ListView básico e con builder #
ListView é o widget máis común para mostrar unha lista lineal de elementos desprazables. É perfecto para mostrar elementos que cambian dinamicamente ou que son demasiados para caber nunha soa pantalla.
Existen dúas formas principais de usar ListView:
- Lista estática:
ListView - Lista dinámica:
ListView.builder
✅ Lista simple (estática) #
Úsase cando tes un número pequeno e fixo de elementos que sabes de antemán. Carga todos os elementos na memoria á vez, o que pode ser ineficiente para listas moi longas.
ListView(
children: [
ListTile(title: Text('Elemento 1')),
ListTile(title: Text('Elemento 2')),
ListTile(title: Text('Elemento 3')),
],
)
🧪 Exemplo #
🔁 Lista dinámica con ListView.builder #
Esta é a forma preferida para listas grandes ou infinitas. Constrúe os elementos da lista só cando son visibles na pantalla, o que o fai moito máis eficiente en canto a rendemento e consumo de memoria.
Máis eficiente cando hai moitos elementos:
class ListaUsuarios extends StatelessWidget {
final List<String> nomes = ['Ana', 'Brais', 'Carlos', 'Diana'];
@override
Widget build(BuildContext contexto) {
return ListView.builder(
itemCount: nomes.length,
itemBuilder: (contexto, index) {
return ListTile(
leading: Icon(Icons.person),
title: Text(nomes[index]),
);
},
);
}
}
🧪 Exemplo #
🧱 GridView #
GridView permite mostrar elementos nunha reixa (cuadrícula), útil para galería de imaxes, paneis de iconas ou calquera deseño que se beneficie dunha disposición de tipo reixa.
Do mesmo xeito que ListView, GridView tamén ten construtores para diferentes escenarios:
GridView.count: Permíteche especificar o número fixo de columnas que queres na túa cuadrícula.GridView.extent: Permíteche especificar o ancho máximo de cada elemento da cuadrícula, e o número de columnas axústase automaticamente.GridView.builder: A mellor opción para cuadrículas grandes ou infinitas, xa que constrúe os elementos dinamicamente.
🧪 Exemplo con GridView.count #
GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
padding: EdgeInsets.all(8),
children: List.generate(6, (index) {
return Container(
color: Colors.teal[100 * (index % 9)],
child: Center(
child: Text(
'Elemento ${index + 1}',
style: TextStyle(fontSize: 18),
),
),
);
}),
)
🧪 Outro exemplo con GridView.count #
import 'package:flutter/material.dart';
class PaginaCuadricula extends StatelessWidget {
@override
Widget build(BuildContext contexto) {
return Scaffold(
appBar: AppBar(
title: Text('Cuadrícula de Elementos'),
),
body: GridView.count(
crossAxisCount: 2, // 2 columnas por fila
crossAxisSpacing: 10, // Espazo horizontal entre elementos
mainAxisSpacing: 10, // Espazo vertical entre elementos
padding: const EdgeInsets.all(10),
children: List.generate(8, (indice) {
return Container(
color: Colors.teal[100 * (indice % 9)], // Cores variadas
child: Center(
child: Text(
'Caixa ${indice + 1}',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
);
}),
),
);
}
}
🧹 Dismissible #
Dismissible permite que un elemento poida ser eliminado deslizándoo cara un lado. É útil para listas onde o usuario poida borrar elementos facilmente.
Para que Dismissible funcione correctamente, cada elemento debe ter unha key única e debes xestionar o que sucede cando o elemento é descartado (por exemplo, eliminalo da túa lista de datos).
🧪 Exemplo #
class ListaEliminable extends StatefulWidget {
@override
State<ListaEliminable> createState() => _ListaEliminableState();
}
class _ListaEliminableState extends State<ListaEliminable> {
List<String> tarefas = ['Mercar pan', 'Estudar Flutter', 'Xogar fútbol'];
@override
Widget build(BuildContext contexto) {
return ListView.builder(
itemCount: tarefas.length,
itemBuilder: (contexto, index) {
final tarefa = tarefas[index];
return Dismissible(
key: Key(tarefa),
onDismissed: (direccion) {
setState(() {
tarefas.removeAt(index);
});
ScaffoldMessenger.of(contexto).showSnackBar(
SnackBar(content: Text('Eliminado: $tarefa')),
);
},
background: Container(color: Colors.red),
child: ListTile(
title: Text(tarefa),
),
);
},
);
}
}
