web-dev-qa-db-ja.com

Flutter Network Imageが円形アバターに収まらない

APIから画像の束を取得しようとしています。画像を円形で表示したいので、CircleAvatar Widgetを使用していますが、正方形の形式で画像を取得しています。これが画像のスクリーンショットです

enter image description here

ここに私が使用しているコードがあります

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

BoxFit、cover、contain、fitWidthなどのfitHeightのすべてのプロパティを使用してみましたが、いずれも機能しません。

imagedartflutterflutter-layout
21
Nudge

これは機能します：Circleに合わせるには、backgroundImage:propertyを使用する必要があります。

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

ダミーのプレースホルダーで確認するには：

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

AppBarアクションウィジェットリストにも同様の問題がありました。

これは私のために働いた：

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

CircleAvatarを使用したくない場合は、次のようにします。

ClipOval(
  child: Image.network(
    'https://via.placeholder.com/150',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
),
8
CopsOnRoad

この場合、次を使用できます。

CircleAvatar(
  radius: 50.0,
  backgroundImage: NetworkImage("https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"),
)

または

CircleAvatar(
  radius: 50.0,
  backgroundImage: AssetImage("assets/images/profile.jpg"),
)

正しく動作しています...

2
Seth Chhai Hout

影付きの丸い画像を次に示します。

child: AspectRatio(
    aspectRatio: 1/1,
    child: Container(
        margin: EdgeInsets.all(
            10.0
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100.0),
            boxShadow:[
              BoxShadow(
                  color: Color.fromARGB(60, 0, 0, 0),
                  blurRadius: 5.0,
                  offset: Offset(5.0, 5.0)
              )
            ],
            image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(user.image)
            )
        )
    )
)
1
Vitali
  ClipOval(
     child: Image.asset(
      'assets/dummy.jpg',
       fit: BoxFit.contain,
       matchTextDirection: true,
       height: 50,
   ))
0
Ishtdeep Hora