web-dev-qa-db-fra.com

Image des coins arrondis dans Flutter

J'utilise Flutter pour faire une liste d'informations sur les films. Maintenant, je veux que l'image de couverture sur la gauche soit une image aux coins arrondis. J’ai fait ce qui suit, mais ça n’a pas marché. Merci!

    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,
    );
  }

comme suit

enter image description here

flutterflutter-layout
47
Liu Silong

Utilisez ClipRRect cela fonctionnera parfaitement

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

Vous pouvez également utiliser CircleAvatar, qui vient avec flutter

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

En utilisant ClipRRect, vous devez coder en dur BorderRadius. Par conséquent, si vous avez besoin de trucs circulaires complets, utilisez ClipOval à la place.

ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),
11
CopsOnRoad
                new Container(
                  width: 48.0,
                  height: 48.0,

                  decoration: new BoxDecoration(
                    shape: BoxShape.circle,
                    image: new DecorationImage(
                        fit: BoxFit.fill,
                        image: new NetworkImage("path to your image")
                    )
                )),
4
simhachalam

Essayez de cette façon

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,
        ),
1
Faisal Kc

Pour l'image, utilisez cette

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

Alors que pour Asset Image, utilisez cette

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