Imagen de esquinas redondeadas en Flutter


122

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 de 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í


¿Descubrió por qué este método no funciona?
Martin

Respuestas:


356

Úselo ClipRRectfuncionará perfectamente

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)

9
Gracias ! Lo hice como dijiste, y luego agregué fit: BoxFit.fill, se ve bastante bien.
Liu Silong

2
Gracias, ¿tiene alguna idea sobre cómo crear un borde colorido en la imagen clipRRect'ed?
iKK

3
@iKK - Envuélvalo en un contenedor con una decoración de caja con los accesorios de border / borderRadius apropiados de esta manera: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(3.0), border: Border.all(color: Colors.grey[300])), child: ClipRRect( borderRadius: BorderRadius.circular(3.0), child: Image.network( uri, fit: BoxFit.fill, width: imageDimension, height: imageDimension, ), ), )
Daniel Allen

1
gracias, un consejo: solo funciona con el mismo ancho y alto
Álvaro Agüero

50

También puedes usar CircleAvatar, que viene con flutter

CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)

2
Esta es la mejor respuesta. Hice extrabackgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture,
saviour123

@ saviour123 no todas las imágenes con esquinas redondeadas son un 'avatar'. Uno aceptado es la respuesta genérica.
nipunasudha

No se puede establecer una altura o un ancho con este widget, lo cual es problemático.
Papillon

38

El uso ClipRRectnecesita codificar BorderRadius, por lo que si necesita elementos circulares completos, use ClipOvalen su lugar.

ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),

2
¡La respuesta más sencilla!
Alvin Konda

1
si la imagen secundaria no es cuadrada, el recorte será elíptico en esta solución.
Bilal Şimşek

29

Prueba esto en su lugar, funcionó para mí:

Container(
  width: 100.0,
  height: 150.0,
  decoration: BoxDecoration(
    image: DecorationImage(
        fit: BoxFit.cover, image: NetworkImage('Path to your image')),
    borderRadius: BorderRadius.all(Radius.circular(8.0)),
    color: Colors.redAccent,
  ),
),

Su respuesta es definitivamente útil, ¡gracias! Pero, ¿qué pasa si el contenido de un contenedor no es solo una imagen sino un widget? ¿Alguna idea?
Oleksandr

13
   Container(
      width: 48.0,
      height: 48.0,
      decoration: new BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
            fit: BoxFit.fill,
            image: NetworkImage("path to your image")
        )
    )),

5

Para la imagen use esto

ClipOval(
    child: Image.network(
        'https://url to your image',
        fit: BoxFit.fill,
    ),
);

Mientras que para Asset Image use esto

ClipOval(
    child: Image.asset(
        'Path to your image',
        fit: BoxFit.cover,
    ),
)

1
Ya usé esto como respuesta, no proporcionaste nada útil. -1 de mí.
CopsOnRoad

4

Con la nueva versión de flutter y material theme, también necesitas usar el widget "Padding" para tener una imagen que no llene su contenedor.

Por ejemplo, si desea insertar una imagen redondeada en la AppBar, debe usar relleno o su imagen siempre será tan alta como la AppBar.

Espero que esto ayude a alguien

InkWell(
        onTap: () {
            print ('Click Profile Pic');
        },
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipOval(
                child: Image.asset(
                    'assets/images/profile1.jpg',
                ),
            ),
        ),
    ),

3

puedes usar ClipRRect así:

  Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(25),
                    child: Image.asset(
                      'assets/images/pic13.jpeg',
                      fit: BoxFit.cover,
                    ),
                  ),
                )

puede establecer su radio, o usuario solo para topLeft o bottom left como:

Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25)
                ,bottomLeft: Radius.circular(25)),
                child: Image.asset(
                  'assets/images/pic13.jpeg',
                  fit: BoxFit.cover,
                ),
              ),
            )

2

Utilice ClipRRect con la propiedad de ajuste de imagen establecida: BoxFit.fill

ClipRRect(
          borderRadius: new BorderRadius.circular(10.0),
          child: Image(
            fit: BoxFit.fill,
            image: AssetImage('images/image.png'),
            width: 100.0,
            height: 100.0,
          ),
        ),

1

Utilice ClipRRect para resolver su problema.

      ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              child: Image.network(
                Constant.SERVER_LINK + model.userProfilePic,
                fit: BoxFit.cover,
              ),
            ),

0

Use this Way en este círculo, la imagen también está funcionando + tiene un precargador también para la imagen de red:

new ClipRRect(
     borderRadius: new BorderRadius.circular(30.0),
     child: FadeInImage.assetNetwork(
          placeholder:'asset/loader.gif',
          image: 'Your Image Path',
      ),
    )

0

Prueba esto, funciona bien.

Container(
  height: 220.0,
  width: double.infinity,
  decoration: BoxDecoration(
    borderRadius: new BorderRadius.only(
      topLeft: Radius.circular(10),
       topRight: Radius.circular(10),
    ),
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage(
        photoUrl,
      ),
     ),
   ),
);

-1

decoración del usuario Imagen de un contenedor.

  @override
  Widget build(BuildContext context) {
    final alucard = Container(
        decoration: new BoxDecoration(
        borderRadius: BorderRadius.circular(10),
          image: new DecorationImage(
              image: new AssetImage("images/logo.png"),
              fit: BoxFit.fill,
          )
        )
    );
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.