🚀 Más widgets de Material 3 para explorar. 👋
Tabla de Contenido
Introducción
🚀 Seguimos con widgets de Material, en este caso conoceremos un poco sobre el widget ListTile.
ListTile
El widget ListTile hace referencia a listas horizontales que pueden tener texto, íconos e imágenes. Contiene tres filas o espacios verticales dentro de la columna donde pueden ir íconos u otros widgets. además, tiene tres tamaños: una línea, dos líneas o tres líneas.
Propiedades
titlepropiedad con el contenido principal del widget.leadingpropiedad donde se puede colocar contenido antes deltitle, como por ejemplo: íconos.subtitlepropiedad con contenido adicional que se muestra debajo deltitle.trailingpropiedad para colocar un widget a la derecha deltitle.densepropiedad para hacer más pequeño / grande el widget.visualDensitypropiedad para definir espacios entre los widgets.shapepropiedad para definir la forma del widget.stylefuente utilizada para eltitle.selectedColorcolor cuando se selecciona un elemento de la lista.iconColorcolor predeterminado para los íconos que se colocan en las propiedadesleadingytrailing.textColorcolor de texto para las propiedadestitleysubtitle, ademásleadingytrailing.titleTextStyleestilo de texto para la propiedadtitle.subtitleTextStyleestilo de texto para la propiedadsubtitle.leadingAndTrailingTextStyleestilo de texto para las propiedadesleadingytrailing.contentPaddingpropiedad para colocar relleno entre el widget y su widget padre.enabledpropiedad para habilitar / deshabilitar el widget.onTapfunción que se ejecuta cuando el usuario toca el widget dentro de la lista. Allí se puede determinar qué se quiere hacer en estos casos, como mostrar un mensaje, llamar una API, etc.onLongPressfunción que se llama cuando el usuario deja presionado el widget.onFocusChangecontrolador que se llama cuando cambia el foco.selectedsi es true yenabled = truetodo el contenido queda con el mismo color.focusColorcolor cuando está el foco sobre el widget.hoverColorel color del widget cuando se sitúa sobre él.splashColorcolor cuando se presiona el widget.tileColorcolor cuando no se está presionando el widget.selectedTileColorcolor cuando la selección del widget es true. Es lo mismo queselected = true.horizontalTitleGapel espacio entretitley los widgetsleadingytrailing.minVerticalPaddingel relleno mínimo entre la parte superior o inferior respecto altitleysubtitle.minLeadingWidthancho mínimo para elleading.minTileHeightalto mínimo para el widget.titleAlignmentdefine como se alineanleadingytrailingverticalmente respecto atitleysubtitle.
Casos de uso
- Se recomienda utilizar para seleccionar varios elementos dentro de un listado.
- Se utilizan normalmente dentro de ListView o también pueden ir dentro de Cards, Columns y Drawers.
Ejemplo
import 'package:flutter/material.dart';
/// Clase Screen para widget listTile
class ListTileScreen extends StatelessWidget {
const ListTileScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Listtile Screen'),
),
body: ListView(
shrinkWrap: true,
children: [
ListTile(
title: const Text('Contenido principal'),
subtitle: const Text('Contenido secundario'),
leading: const Icon(Icons.circle),
trailing: const Icon(Icons.more_vert),
shape: const CircleBorder(),
iconColor: Colors.green,
textColor: Colors.black54,
titleTextStyle:
const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
subtitleTextStyle: const TextStyle(fontStyle: FontStyle.italic),
contentPadding: const EdgeInsets.all(10),
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Acción al ejecutar onTap'),
),
);
},
onLongPress: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content:
Text('Acción al dejar presionado el widget onLongPress'),
),
);
},
splashColor: Colors.amber,
),
const ListTile(
title: Text('Contenido deshabilitado'),
subtitle: Text('Contenido secundario'),
leading: Icon(Icons.circle),
trailing: Icon(Icons.more_vert),
enabled: false,
),
const ListTile(
title: Text('Contenido principal'),
subtitle: Text('Contenido secundario'),
leading: Icon(Icons.circle),
trailing: Icon(Icons.more_vert),
selected: true,
),
const ListTile(
iconColor: Colors.red,
title: Text('Contenido principal'),
subtitle: Text('Contenido secundario'),
leading: Icon(Icons.circle),
trailing: Icon(Icons.more_vert),
titleAlignment: ListTileTitleAlignment.top,
),
const Card(
child: ListTile(
title: Text('Título dentro de una Card'),
),
),
const Card(
child: ListTile(
title: Text('Título dentro de una Card'),
subtitle: Text('subtítulo dentro de una card'),
),
),
const Card(
child: ListTile(
leading: CircleAvatar(
child: Text('1'),
),
title: Text('Título dentro de una Card'),
subtitle: Text('title - subtitle - leading'),
),
),
const Card(
child: ListTile(
leading: CircleAvatar(
child: Text('2'),
),
title: Text('Título dentro de una Card'),
subtitle: Text('title - subtitle - leading - trailing'),
trailing: Icon(Icons.arrow_circle_right),
),
),
const SizedBox(
height: 100,
)
],
),
);
}
}
Consideraciones
- Utilizar ListTile para mostrar listados en orden alfabético.
- Se recomienda utilizar para seleccionar varios elementos dentro de un listado.
Conclusión
En conclusión, el ListTile es una muy buena opción para los listados donde queremos que hayan acciones secundarias que nos permitan accionar sobre cada uno de los elementos.
¡Gracias por leer!
