web-dev-qa-db-ja.com

Flutter CircleAvatar backgroundImageが円を埋めていない

CircleAvatar をbackgroundImageプロパティと共に使用して、カメラから取得した画像をロードしていますが、表示されている画像がサークルアバター全体を占めていません。円形の長方形の画像のように見えます。

サークルアバターをカバーするように画像を拡大するにはどうすればよいですか？ありがとう。

imageflutterwidget
9
Edmand Looi

いつでも画像を作成して手動でクリップすることができます：

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

これは私の実用的な例です：

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

アセットのローカル画像を使用している場合は、CircleAvatarを次のように使用できます。

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

ネットワークイメージを使用している場合は、CircleAvatarを次のように使用できます。

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