web-dev-qa-db-fra.com

Cercle de flottement Fond d'avatar Image ne remplissant pas le cercle

J'utilise un CircleAvatar avec une propriété backgroundImage pour charger une image prise depuis un appareil photo mais l'image affichée ne remplit pas tout l'avatar du cercle. Cela ressemble à une image rectangulaire dans un cercle.

Comment agrandir l'image pour couvrir l'avatar du cercle? Merci.

imageflutterwidget
9
Edmand Looi

Vous pouvez toujours créer une image et la découper manuellement:

ClipOval(
  child: Image.network(
    "url.jpg",
    fit: BoxFit.cover,
    width: 90.0,
    height: 90.0,
  )
),
18
Ian

Voici mon exemple de travail:

Stack(
                fit: StackFit.expand,
                children: <Widget>[
                  CircleAvatar(
                    radius: 30.0,
                    backgroundImage:
                        NetworkImage("https://via.placeholder.com/150/92c952"),
                    backgroundColor: Colors.transparent,
                  ),
                  Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Image.asset(
                      'assets/photo-camera.png',
                      width: 20.9,
                      height: 19.9,
                    ),
                  ),
                ],
              ))
0
Payam Khaninejad

Si vous utilisez une image locale de l'élément, vous pouvez utiliser CircleAvatar comme,

CircleAvatar(
          backgroundImage: ExactAssetImage('assets/images/cook.jpeg'),
          // Optional as per your use case
          // minRadius: 30,
          // maxRadius: 70,
        ),

Si vous utilisez une image réseau, vous pouvez utiliser CircleAvatar comme,

CircleAvatar(
     radius: 30.0,
     backgroundImage: NetworkImage(imageURL),
     backgroundColor: Colors.transparent,
     ));
0
Ameer