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í

Liu Silong
fuente
¿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,
    ),
)
Abdi Hamid
fuente
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')
)
onmyway133
fuente
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,
  ),
),
CopsOnRoad
fuente
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,
  ),
),
Faisal Kc
fuente
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")
        )
    )),
simhachalam
fuente
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,
    ),
)
ikben
fuente
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',
                ),
            ),
        ),
    ),
Patrick Gharapetians Gheshlagh
fuente
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,
                ),
              ),
            )
sana ebadi
fuente
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,
          ),
        ),
Yogesh Alai
fuente
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,
              ),
            ),
Paras Sharma
fuente
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',
      ),
    )
Ajit Singh
fuente
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,
      ),
     ),
   ),
);
terap30
fuente
-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,
          )
        )
    );
SR Keshav
fuente