0

¿Es posible hacer los bordes redondeados en un ListTile? he intentado con clipRRect y con shape del ListTile y no he logrado hacerlo. Gracias

Ejemplo

child: ClipRRect(
            borderRadius: BorderRadius.circular(12.0),
            child: ListTile(
              contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
              shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(30.0),
              ),
              title: Text(
                user.fromFullName,
                style: TextStyle(
                  fontSize: 18,
                  color: Theme.of(context).colorScheme.mainBlue,
                  fontWeight: FontWeight.w600,
                ),
              ),
2
  • Puedes agregar el código que usas? Commented el 30 oct. 2020 a las 15:13
  • Puse lo máximo que me dejó stackoverflow porque no me deja poner todo, muchas gracias!!!
    – Darío
    Commented el 30 oct. 2020 a las 15:39

4 respuestas 4

2

si se puede con estas propiedades shape

  borderRadius: BorderRadius.circular(18.0),
  side: BorderSide(color: Colors.red)
) ```

Deberian verse algo asi(imagen de ejemplo[![introducir la descripción de la imagen aquí][1]][1])


  [1]: https://i.sstatic.net/ubJDP.png
1
  • Gracias! pero probé de poner shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),), y no me da resultado. no lo cambia.
    – Darío
    Commented el 30 oct. 2020 a las 14:50
0

Sobre el ejemplo que pusiste en tu pregunta, si es posible, te dejo el código, solo necesitas usar el tileColor para darle el color al tile, el shape ya no es necesario porque al ponerle color no considera el shape, así que por eso toca usar ClipRRect.


ClipRRect(
        borderRadius: BorderRadius.circular(12.0),
        child: ListTile(
          tileColor: Colors.blue,
          contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
          title: Text(
            'Username',
            style: TextStyle(
              fontSize: 18,
              color: Colors.red,
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
      ),

Prueba y me avisas, te recomiendo mi canal para contenido avanzado de Flutter :) https://youtube.com/diegoveloper

Si no te funciona agrega que versión de Flutter usas, flutter doctor

2
  • Gracias Diego ya lo pruebo! te sigo hace años y veo tus videos!
    – Darío
    Commented el 30 oct. 2020 a las 15:50
  • dale, ya actualicé mi respuesta :) Commented el 30 oct. 2020 a las 15:54
0

Con la ayuda de los maestros pude solucionarlo, tal como dijo Fernando Herrera y diegoveloper ClipRRrect si esta cortando el ListTile (con un color de fondo se ve claro) sin embargo dejaba las esquinas blancas, eso lo solucione envolviendo el ClipRRrect en un Container y dándole el color que quiero. Muchas gracias por su ayuda!

child: Container(
            color: Colors.red,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(12.0),
              child: ListTile(
                contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
                tileColor: Colors.blue,
                title: Text(

introducir la descripción de la imagen aquí

-1

Creo que si es posible, envuelve el ListTile en un ClipRRect y prueba, ojo que son 2 R's (ClipRRect)

2
  • Hola Profe! sigo tu curso en Udemy! he probado envolver en ClipRRect y no obtengo resultado. sigue igual, esto viendo con la propiedad shape del ListTile pero ya habia probado y no me dió resultado.
    – Darío
    Commented el 30 oct. 2020 a las 14:43
  • Gracias por tu contribución, recuerda que es demasiado importante realizar respuestas en base a Cómo responder ya cuentas con reputación para realizar comentarios, saludos.
    – Jorgesys
    Commented el 30 oct. 2020 a las 19:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.