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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
ListView( children: const [ ListTile( leading: Icon(Icons.car_rental), title: Text('Car'), trailing: Icon(Icons.more_vert), ), ListTile( leading: Icon(Icons.flight), title: Text('Flight'), trailing: Icon(Icons.more_vert), ), ListTile( leading: Icon(Icons.train), title: Text('Train'), trailing: Icon(Icons.more_vert), ) ], ) |
Así es como el código se traduce en diseño:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
final List<String> items = List<String>.generate(10000, (i) => '$i'); ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return ListTile( leading: CircleAvatar( backgroundColor: const Color(0xff764abc), child: Text(items[index]), ), title: Text('Item ${items[index]}'), subtitle: Text('Item description'), trailing: Icon(Icons.more_vert), ); }, ) |
Producción:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
class Language { String name; bool isChecked; Language(this.name, {this.isChecked = false}); } // 1. final List<Language> languages = [Language('English'), Language('French'), Language('German')]; ListView.builder( itemCount: languages.length, itemBuilder: (context, index) { return CheckboxListTile( // 2. title: Text('${languages[index].name}'), // 3. value: languages[index].isChecked, // 4. onChanged: (bool? value) { setState(() { languages[index].isChecked = value!; }); }, // 5. secondary: const Icon(Icons.language), ); }, ) |
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:
Para intercambiar el widget secundario (primario) y la casilla de verificación, puede usar la propiedad controlAffinity y establecerla en ListTileControlAffinity.leading.
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)).
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
// 1. enum Gender { male, female } // 2. Gender? _gender = Gender.male; ListView( children: [ // 3. RadioListTile<Gender>( secondary: Icon(Icons.male), controlAffinity: ListTileControlAffinity.trailing, title: const Text('Male'), // 4. value: Gender.male, // 5. groupValue: _gender, // 6. onChanged: (Gender? value) { setState(() { _gender = value; }); }, ), RadioListTile<Gender>( secondary: Icon(Icons.female), controlAffinity: ListTileControlAffinity.trailing, title: const Text('Female'), value: Gender.female, groupValue: _gender, onChanged: (Gender? value) { setState(() { _gender = value; }); }, ), ], ) |
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:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
class Appliance { String name; bool isOn; Appliance(this.name, {this.isOn = false}); } // 1. final List<Appliance> appliances = [ Appliance('TV'), Appliance('Fan'), Appliance('Refrigerator'), ]; ListView.builder( itemCount: appliances.length, itemBuilder: (context, index) { return SwitchListTile( // 2. title: Text('${appliances[index].name}'), // 3. value: appliances[index].isOn, // 4. onChanged: (bool value) { setState(() { appliances[index].isOn = value; }); }, ); }, ) |
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:
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:
|
1 2 3 4 5 6 7 8 |
return ListTile( // 1. tileColor: Colors.redAccent, // 2. textColor: Colors.white, // 3. iconColor: Colors.white, ); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, listTileTheme: ListTileThemeData( tileColor: Colors.redAccent, textColor: Colors.white, iconColor: Colors.white, ), ), home: MyHomePage(), ); |
El primer y segundo enfoque producen el mismo resultado que el siguiente:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
ListView( children: ListTile.divideTiles(context: context, tiles: [ ListTile( leading: Icon(Icons.car_rental), title: Text('Car'), ), ListTile( leading: Icon(Icons.flight), title: Text('Flight'), ), ListTile( leading: Icon(Icons.train), title: Text('Train'), ), ]).toList(), ) |
Producción:
Si está utilizando ListView.Builder, puede reemplazarlo con ListView.separated y agregar el parámetro separatorBuilder que devuelve el separador.
Código de muestra:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ListView.separated( // <-- SEE HERE itemCount: items.length, itemBuilder: (context, index) { return ListTile( leading: CircleAvatar( backgroundColor: const Color(0xff764abc), child: Text(items[index]), ), title: Text('Item ${items[index]}'), subtitle: Text('Item description'), trailing: Icon(Icons.more_vert), ); }, separatorBuilder: (context, index) { // <-- SEE HERE return Divider(); }, ) |
Producción:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return Dismissible( // Step 1 key: Key(items[index]), onDismissed: (direction) { // Step 2 setState(() { items.removeAt(index); }); ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('${items[index]} dismissed'))); }, child: ListTile( //visualDensity: VisualDensity(vertical: 4), leading: CircleAvatar( backgroundColor: const Color(0xff764abc), child: Text(items[index]), ), title: Text('Item ${items[index]}'), subtitle: Text('Item description'), trailing: Icon(Icons.more_vert), ), ); }, ) ) |
(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:
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:
|
1 2 3 4 5 6 7 8 9 10 |
ListTile( visualDensity: VisualDensity(vertical: 4), //<-- SEE HERE leading: CircleAvatar( backgroundColor: const Color(0xff764abc), child: Text(items[index]), ), title: Text('Item ${items[index]}'), subtitle: Text('Item description'), trailing: Icon(Icons.more_vert), ); |
Producción:
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.
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
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.
