Cómo hacer una imagen con esquinas redondeadas en Flutter

Resuelto Liu Silong asked hace 6 años • 20 respuestas

Estoy usando Flutter para hacer una lista de información sobre películas. Ahora quiero que la imagen de portada de la izquierda sea una imagen con esquinas redondeadas. Hice lo siguiente, pero no funcionó. ¡Gracias!

    getItem(var subject) {
    var row = Container(
      margin: EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          Container(
            width: 100.0,
            height: 150.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              color: Colors.redAccent,
            ),
            child: Image.network(
              subject['images']['large'],
              height: 150.0,
              width: 100.0,
            ),
          ),
        ],
      ),
    );
    return Card(
      color: Colors.blueGrey,
      child: row,
    );
  }

como sigue

ingrese la descripción de la imagen aquí

Liu Silong avatar Jul 25 '18 14:07 Liu Silong
Aceptado

Úselo ClipRRectfuncionará perfectamente.

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)
Abdi Hamid avatar Jul 25 '2018 08:07 Abdi Hamid

1. Imagen circular (sin borde)

ingrese la descripción de la imagen aquí

  • Usando CircleAvatar:

    CircleAvatar(
      radius: 48, // Image radius
      backgroundImage: NetworkImage('imageUrl'),
    )
    
  • Usando ClipRRect:

    ClipOval(
      child: SizedBox.fromSize(
        size: Size.fromRadius(48), // Image radius
        child: Image.network('imageUrl', fit: BoxFit.cover),
      ),
    )
    

2. Imagen circular (con borde)

ingrese la descripción de la imagen aquí

  • Usando CircleAvatar:

    CircleAvatar(
      radius: 56,
      backgroundColor: Colors.red,
      child: Padding(
        padding: const EdgeInsets.all(8), // Border radius
        child: ClipOval(child: Image.network('imageUrl')),
      ),
    )
    
  • Usando ClipRRect:

    Container(
      padding: EdgeInsets.all(8), // Border width
      decoration: BoxDecoration(color: Colors.red, shape: BoxShape.circle),
      child: ClipOval(
        child: SizedBox.fromSize(
          size: Size.fromRadius(48), // Image radius
          child: Image.network('imageUrl', fit: BoxFit.cover),
        ),
      ),
    )
    

3. Imagen redondeada (sin borde)

ingrese la descripción de la imagen aquí

ClipRRect(
  borderRadius: BorderRadius.circular(20), // Image border
  child: SizedBox.fromSize(
    size: Size.fromRadius(48), // Image radius
    child: Image.network('imageUrl', fit: BoxFit.cover),
  ),
)

4. Imagen redondeada (con borde)

ingrese la descripción de la imagen aquí

final borderRadius = BorderRadius.circular(20); // Image border

Container(
  padding: EdgeInsets.all(8), // Border width
  decoration: BoxDecoration(color: Colors.red, borderRadius: borderRadius),
  child: ClipRRect(
    borderRadius: borderRadius,
    child: SizedBox.fromSize(
      size: Size.fromRadius(48), // Image radius
      child: Image.network('imageUrl', fit: BoxFit.cover),
    ),
  ),
)

Hay otras formas, como usar DecoratedBox, pero eso haría que la respuesta fuera demasiado larga.

CopsOnRoad avatar Jan 16 '2019 17:01 CopsOnRoad