web-dev-qa-db-ja.com

Flutterの角丸イメージ

Flutterを使用して、映画に関する情報のリストを作成しています。ここで、左側のカバー画像を角の丸い画像にする必要があります。私は次のことをしましたが、うまくいきませんでした。ありがとう！

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

次のように

enter image description here

flutterflutter-layout
47
Liu Silong

ClipRRectを使用すると、完全に機能します

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

CircleAvatarを使用することもできます。これにはフラッターが付属しています

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

ClipRRectを使用すると、BorderRadiusをハードコーディングする必要があるため、完全な循環的なものが必要な場合は、代わりにClipOvalを使用します。

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

この方法で試してください

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

画像にはこれを使用してください

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

Asset Imageの場合はこれを使用します

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