Crear un listado estático de Widgets en un Wrap/Row en base a un listado de objetos en Flutter
Veremos como crear un listado de Widgets en base a un listado de objetos o cualquier otra primitiva, en este ejemplo, un listado de TextButtons.
Te queríamstrar cómo puedes crear un listado en este caso no me refiero al listado tipo listviw o listviw de tipo builder que es el que estamos viendo aquí en pantalla:
ListView.builder(
itemCount: bookResponseModel.books.length,
itemBuilder: (_, int position) {
return _itemBook(position, context);listviw builder = RecycleView
Que recordando un poco recuerda que el el de listView de tipo builder viene siendo el equivalente al RecycleView en Android nativo y lo que hace es reciclar los items que no se ve en pantalla para visualizarlos es decir por ejemplo ahorita estamos viendo est estamos aquí arriba si bajamos un poco este se va a ocultar en algún punto y cuando ya se oculte en principio en en base a alguna lógica se mostraría de nuevo ese mismo componente simplemente lo lo que hace es cambiar la información por que está allí abajo es decir es un poco más eficiente que simplemente crear un montón de listados en memoria simplemente lo reutiliza lo que ya tengamos ahí generado bueno no vengo a hablar de eso.
listviw builder no recomendado para un listado estático
Sino en este caso me refiero a este tipo de listados que obviamente no requerimos de un listView aunque lo pudiéramos emplear también pero sería un poco más incómodo para mostrarlo de esta forma y obviamente no emplearías un listview de tipo builder porque en este caso yo pensaría o creo que sería lo más lógico que sería bastante ineficiente porque no hace falta mantener como quien dice ese proceso de verificar si este item no se está visualizando para ocultarlo al igual que este el listado que tenemos aquí arriba este listado también se compone de un modelo que sería un poco lo más interesante aunque también puede ser de cualquier cosa entonces cómo hice yo para construir este listado en este caso para aplicar filtros es lo que te quiere mostrar por cierto esto lo hice mediante el bottom sheet que también ya tengo un video sobre cómo construirlo ahí lo puedes ver y lo que hice fue lo siguiente aquí lo estoy colocando en Wrap que es el que me permite hacer adaptar todo este contenido:
Wrap(
spacing: 1,
alignment: WrapAlignment.start,
crossAxisAlignment: WrapCrossAlignment.start,
children: categories
.map((c) => TextButton(
child: Text(
c.title,
style: TextStyle(
color: _categoryId == c.id
? Colors.purple
: Theme.of(context).colorScheme.secondary,
fontWeight: _categoryId == c.id
? FontWeight.bold
: FontWeight.w500),
),
onPressed: () {
if (_categoryId == c.id) {
_categoryId = 0;
} else {
_categoryId = c.id;
}
setState(() {});
_filter();
},
))
.toList(),
// children: [
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss555'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss555'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss'),
// Text('sss555'),
// ],
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(LocaleKeys.close.tr()),
),Fácilmente en una pila en este caso o por filas una fila otra fila que viene siendo una especie de equivalente para lo que sería el column y lo que sería el round pero este en este caso cuando llegue aquí al extremo simplemente lo va encando hacia abajo entonces ya hace el trabajo duro por mí al igual que lo que es el Row y lo que es el Column también recibe lo que es un listado de widget entiéndase un children que es lo que tenemos por acá entonces yo en este caso tengo es un listado de objetos que es lo que yo quiero mostrar pero otra vez puede ser una primitiva por ejemplo un String que es lo que yo tengo por acá voy a ver si puedo colocar un punto de interrupción aquí voy a recargar aquí la página para ver exactamente qué categoría si se puede entender todo de una mejor manera busco aquí el de cursos otra vez okay era el de libros en donde coloqué el punto aquí vamos sa ver qué es directamente un listado con alguna entidad en mi caso es lo que yo llamo categorías y aquí puedes ver lo que yo quiero convertir a un botón para filtrar cuyo video también ya te mostré cómo hice el filtro por aquí entonces es muy sencillo realmente tal cual puedes ver por acá lo que yo hice fue utilizar el método de map que me permite mapear una estructura en este caso un listado de categorías de un objeto a otra estructura en este caso un listado de widget que es justamente lo que recibe este children que tenemos acá un listado de widget cual puedes ver entonces por aquí simplemente obtenemos el objeto la categoría la categoría de manera individual como funciona con el forage por aquí lo iteramos aquí tenemos o componemos el widget que queramos construir en este caso simplemente es un text Button tal cual puedes ver por acá que recibe un texto que en este caso es el texto o el mensaje que aparece por aquí el que vías déjame recargar acá cada uno de estos items que tenemos acá obviamente tú aquí puedes colocar lo que tú quieras un icono directamente ente una imagen un enlace cualquier otro tipo de widget yo en este caso requiero es un botón así que empleé esta estructura que tenemos acá esto nos devolvería todo esto obviamente un mapa hasta este punto y nosotros necesitamos es un listado así que para eso empleamos la función bueno el método llamado to list que nos permite convertir ese esos mapas a lo que es directamente un listado y lo colocamos aquí de manera directa entonces así de fácil tú puedes construir desde el mismo widget desde el mismo método de builder se pudiera decir un listado de widget en base a un listado de objetos o cualquier otra primitiva que tú quieras emplear.
Tambien podemos crear widgets en base a un listado de la siguiente forma:
List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headlineSmall,
),
);- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter