web-dev-qa-db-fra.com

L'image réseau flutter ne correspond pas à l'avatar circulaire

J'essaie de récupérer un tas d'images d'une api. Je veux que les images soient affichées sous forme circulaire, j'utilise donc le widget CircleAvatar, mais je continue à obtenir des images au format carré . Voici une capture d'écran d'images

 enter image description here

Voici le code que j'utilise

ListTile(leading: CircleAvatar(child: Image.network("${snapshot.data.hitsList[index].previewUrl}",fit: BoxFit.scaleDown,)),),

J'ai essayé d'utiliser toutes les propriétés de BoxFit comme cover, contain, fitWidth, fitHeight etc., mais aucune d'entre elles ne fonctionne.

imagedartflutterflutter-layout
6
Nudge

Cela fonctionnera: vous devez utiliser la propriété backgroundImage: pour l'adapter à Circle.

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage("${snapshot.data.hitsList[index].previewUrl}"),
                backgroundColor: Colors.transparent,
              )

Pour vérifier avec un espace réservé factice:

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,
              )
7
anmol.majhail

Avait un problème similaire dans la liste de widgets AppBar actions.

Cela a fonctionné pour moi:

CircleAvatar(
    radius: 18,
    child: ClipOval(
        child: Image.network(
          'image-url',
        ),
    ),
),
2
michaelbn