PIXEL FACEBOOK
logo-blanco

Cómo agregar ListTile en Flutter: un tutorial con ejemplos

Lo que vas a encontrar...

La mayoría de las veces, al desarrollar, puede encontrarse llenando ListView con algún tipo de formato predefinido. En lugar de crear este diseño usted mismo usando filas, columnas y contenedores, puede usar el widget listo para usar en Flutter llamado el widget ListTile para ayudarlo.

En este tutorial, te mostraré cómo agregar un widget ListTile en una aplicación de Flutter con algunos ejemplos prácticos.

Esto es lo que cubriremos hoy:

¿Qué es ListTile?

El widget ListTile en Flutter es un elemento de la interfaz de usuario que muestra información relacionada.

Sigue la especificación de la Lista de Material Design. Un ListTile típico se divide en tres secciones; Comenzar, Centroy Final. La sección Inicio contiene el widget principal; la sección central incluye el título y el subtítulo; y la sección Fin contiene el widget final.

Diagrama que muestra secciones de mosaico de lista

Se utiliza principalmente para completar vistas desplazables como ListView, Column y Row. Por ejemplo, puede usar ListTile para mostrar una lista de tareas pendientes, correos electrónicos, opciones de navegación, etc. También puede recibir el evento de clic presionando ListTile.

Si eres un aprendiz visual, echa un vistazo a este rápido video tutorial:

ListTile agregado

Aquí está el código mínimo para mostrar ListTile en el widget ListView:

Así es como el código se traduce en diseño:

Lista de código de mosaico con el resultado que se muestra en el iPhone

Cuando desee usar ListTile para completar la larga lista que podría provenir de su backend, puede envolver el único widget ListTile dentro de ListView.Builder y mostrar los datos dentro de ListTile, como se muestra en el siguiente código:

Producción:

Mostrar elementos de mosaico en iPhone

Variantes de ListTile

También hay otros tipos de ListTile que le permiten realizar una acción específica en él.

Estos son:

Más artículos interesantes de LogRocket:

  • CheckboxListTile
  • RadioListaAzulejo
  • SwitchListTile

CheckboxListTile

El widget CheckboxListTile es una combinación de los widgets ListTile y Checkbox.

Puede usar este widget para marcar cualquier elemento como hecho, por ejemplo; elementos para hacer. De forma predeterminada, la casilla de verificación se muestra en el lado derecho de ListTile (para el idioma de izquierda a derecha).

Aquí se explica cómo agregar el widget CheckboxListTile:

Explicación de los números en el bloque de código:

  • Una variable que contiene una lista de idiomas.
  • Esto muestra la etiqueta de la casilla de verificación
  • Esto determina si marcar o desmarcar el elemento
  • Esto se llama cuando presiona ListTile
  • Esto actúa como un icono principal.

Producción:

Inglés, francés y alemán con casillas de verificación

Para intercambiar el widget secundario (primario) y la casilla de verificación, puede usar la propiedad controlAffinity y establecerla en ListTileControlAffinity.leading.

Casillas de verificación ahora a la izquierda del texto

También puede cambiar la forma de la casilla de verificación agregando el parámetro checkboxShape y estableciéndolo en RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)).

Casillas de verificación circulares

RadioListaAzulejo

El widget RadioListTile es una combinación de los widgets ListTile y RadioButton: este widget se usa para seleccionar una sola opción de una lista de elementos.

Aquí se explica cómo agregar el widget RadioListTile:

Explicación de los números en el bloque de código:

  • Una enumeración que contiene todos los valores de selección para RadioListTile
  • Esto guarda la selección predeterminada usando enumeración
  • Se agregó el tipo de enumeración RadioListTile
  • Asignar un valor de selección al mosaico de lista actual. ListTile representa este valor
  • Esto se utiliza para mostrar el valor actualmente seleccionado
  • Esto se llama con la selección cuando alterna el botón de opción

Producción:

opcion hombre o mujer

SwitchListTile

El widget SwitchListTile es una combinación de los widgets ListTile y Switch.

Puede usar este widget para crear la interacción de la interfaz de usuario que permite a los usuarios habilitar o deshabilitar la configuración de la aplicación.

Aquí se explica cómo agregar el widget SwitchListTile:

Explicación de los números en el bloque de código:

  • Una variable que contiene una lista de dispositivos
  • Esto muestra el nombre o título del ListTile
  • Esto determina si habilitar o deshabilitar el interruptor
  • Esto se llama cuando cambias el interruptor

Producción:

Mostrar elementos con interruptor de palanca

Gestión de temas ListTile

El tema es un aspecto esencial del desarrollo de aplicaciones front-end. El tema transmite su marca y, si no se gestiona con cuidado, puede perder mucho tiempo intentando que todos los elementos de la interfaz de usuario sigan la misma regla.

Suponga que desea cambiar la apariencia de ListTile para que coincida con su diseño. Realmente tienes las siguientes dos opciones:

  • Cambiar tema a nivel de widget
  • Cambiar tema a nivel de aplicación

Cambiar tema a nivel de widget

Puede cambiar la apariencia de ListTile modificando directamente sus propiedades, como el color, la forma y el tamaño.

Así es como puede cambiar el color de fondo, el color del texto y el color del icono de ListTile:

Explicación de los números en el bloque de código:

  • Esto cambia el color de fondo del ListTile
  • Esto cambia el color de todo el texto que aparece en ListTile
  • Esto cambia el color de todos los íconos que aparecen en ListTile

Cambiar tema a nivel de aplicación

Probablemente querrá cambiar la estética visual del widget ListTile en todas las páginas de la aplicación. Puede hacer esto configurando listTileTheme y luego agregando el widget ListTileThemeData.

En el widget ListTileThemeData, puede especificar todas las propiedades que desea modificar para todos los widgets ListTile en su proyecto.

Aquí está el código de ejemplo:

El primer y segundo enfoque producen el mismo resultado que el siguiente:

El fondo ahora es rojo.

Agregar un divisor

Agregar un separador lo ayuda a distinguir claramente los elementos, especialmente cuando los elementos se muestran con tres líneas en la sección central.

Para agregar el separador entre los elementos ListTile, agregue el widget ListView. En ListView, agregue ListTile.divideTiles con la propiedad tiles y una lista de ListTiles.

Código de muestra:

Producción:

Separador de mosaicos de lista

Si está utilizando ListView.Builder, puede reemplazarlo con ListView.separated y agregar el parámetro separatorBuilder que devuelve el separador.

Código de muestra:

Producción:

jagonzalez.org | ListTile en Flutter | 1*1GID5qvvb2kgzcEjiXc5pg

Se agregó deslizar para omitir el comportamiento

La función deslizar para descartar le permite eliminar un ListTile en particular de la lista con un gesto de deslizar. Por ejemplo, puede usar esta función para eliminar un correo electrónico de su lista.

Aquí están los pasos:

  • Envuelva su widget ListTile dentro del widget descartable
  • En el widget Descartable, agregue el parámetro onDismissed y registre una devolución de llamada. Aquí puede escribir la lógica para eliminar el elemento de la lista.

(Nota: el código anterior solo elimina ListTile de la interfaz de usuario, y deberá escribir la lógica comercial usted mismo para eliminar el elemento de su base de datos)

Producción:

El usuario desliza para eliminar elementos de la lista

Cambiar la altura de ListTile

A veces, es posible que desee ajustar la altura de ListTile hasta cierto punto. El widget ListTile no admite directamente la propiedad de altura porque sus dimensiones están restringidas según la especificación de diseño de materiales. Entonces, para aumentar o disminuir la altura de ListTile, puede usar la propiedad visualDensity.

Establecer visualDensity en un número positivo aumentará la altura de ListTile, mientras que un número negativo disminuirá la altura.

(Nota: Los valores máximos y mínimos que puede configurar son 4 y -4)

Aquí está el código de ejemplo:

Producción:

Los mosaicos de elementos de lista tienen mayor altura

Personalización

Puede agregar varias personalizaciones a ListTile utilizando las propiedades disponibles. Por ejemplo, puede cambiar su color (en diferentes estados como pasar el mouse, tocar, etc.), su forma, agregar espacio entre el título y otros elementos, y cambiar su altura, etc.

Puedes ver todas las propiedades que soporta yendo a su definición. Para ver todas las propiedades, simplemente haga clic derecho y luego Ir a>Información Dónde Costumbres.

Ver la lista de todas las propiedades

Conclusión

Agregar el widget ListTile lo ayuda a acelerar la velocidad de desarrollo de la aplicación. Sigue las especificaciones del material y cubre todo lo que necesita para exhibir un artículo de manera significativa.

En este tutorial, primero analizamos cómo agregar ListTile, sus tipos y cómo administrar el tema, y ​​cubrimos algunos escenarios, como agregar un separador y una función de deslizar para omitir y cambiar la altura de ListTile, todo eso. Espero que lo encuentre útil en la construcción de su próxima lista.

LogRocket: Visibilidad total en su Web y aplicaciones móviles

Banner de prueba gratuita de LogRocket Dashboard

LogRocket es una solución de monitoreo de aplicaciones front-end que le permite reproducir problemas como si estuvieran ocurriendo en su propio navegador. En lugar de adivinar por qué ocurren los errores o pedir a los usuarios capturas de pantalla y volcados de registros, LogRocket le permite reproducir la sesión para comprender rápidamente qué salió mal. Funciona muy bien con cualquier aplicación, independientemente del marco, y tiene complementos para guardar contexto adicional de Redux, Vuex y @ngrx/store.

Además de registrar las acciones y el estado de Redux, LogRocket registra los registros de la consola, los errores de JavaScript, los seguimientos de la pila, las solicitudes/respuestas de la red con encabezados y cuerpos, los metadatos del navegador y los registros personalizados. También instrumenta el DOM para guardar HTML y CSS en la página, recreando videos con píxeles perfectos incluso de las aplicaciones web y móviles más complejas de una sola página.

Pruébalo gratis.

Fuente

Facebook
Twitter
LinkedIn
WhatsApp

Deja una respuesta

Artículos Relacionados

Síguenos