es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo agregar una sombra a ListTile en Flutter como ‘elevation’?

30 Jul, 2023 Programación

Necesito agregar una sombra en los elementos de mi lista de elementos de ListTile en Flutter, pero no pude hacerlo con BoxShadow porque solo es posible en Container.

enter image description here

Este es mi ListTile:

child: ListTile(
  leading: const Icon(Icons.flight_land),
  tileColor: Colors.black.withOpacity(0.5),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15),
    side: BorderSide(
      color: Colors.black,
    ),
  ),

  title: Text(
    snapshot.data!.docChanges[index].doc['nameCourse'],
    style: TextStyle(
      fontSize: 20,
      color: Colors.blueAccent,
    ),
  ),
  contentPadding: EdgeInsets.symmetric(
    vertical: 8,
    horizontal: 16,
  ),
),
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar sombra al elemento ListTile en Flutter, puedes envolver el widget ListTile dentro de un Container y aplicar BoxShadow al Container. Aquí tienes un ejemplo de código para agregar sombra al elemento ListTile:

    child: Container(
  decoration: BoxDecoration(
    color: Colors.black.withOpacity(0.5),
    borderRadius: BorderRadius.circular(15),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.3),
        spreadRadius: 2,
        blurRadius: 5,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: ListTile(
    leading: const Icon(Icons.flight_land),
    title: Text(
      snapshot.data!.docChanges[index].doc['nameCourse'],
      style: TextStyle(
        fontSize: 20,
        color: Colors.blueAccent,
      ),
    ),
    contentPadding: EdgeInsets.symmetric(
      vertical: 8,
      horizontal: 16,
    ),
  ),
),

    En este código, se utiliza BoxDecoration para agregar un color de fondo negro con una opacidad de 0.5 y aplicar BoxShadow al Container. La propiedad boxShadow toma una lista de BoxShadow que define las propiedades de la sombra. Puedes ajustar las propiedades spreadRadius, blurRadius y offset para obtener el efecto de sombra deseado. Finalmente, el widget ListTile está envuelto dentro del Container para mostrar el efecto de sombra.

Comments are closed.