Hình ảnh Góc tròn trong Flutter

Tôi đang sử dụng Flutter để tạo danh sách thông tin về phim. Bây giờ tôi muốn ảnh bìa bên trái là ảnh có góc bo tròn. Tôi đã làm như sau, nhưng nó không hoạt động. Cảm ơn!

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

như sau

Sử dụng ClipRRectnó sẽ hoạt động hoàn hảo

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

Bạn cũng có thể sử dụng CircleAvatar, đi kèm với

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

Việc sử dụng ClipRRectbạn cần phải mã hóa cứng BorderRadius, vì vậy nếu bạn cần nội dung tròn hoàn chỉnh, hãy sử dụng ClipOvalthay thế.

ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),

Hãy thử điều này thay thế, hiệu quả với tôi:

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

   Container(
      width: 48.0,
      height: 48.0,
      decoration: new BoxDecoration(
        shape: BoxShape.circle,
        image: new DecorationImage(
            fit: BoxFit.fill,
            image: NetworkImage("path to your image")
        )
    )),

Đối với hình ảnh sử dụng cái này

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

Trong khi đối với Hình ảnh nội dung, hãy sử dụng cái này

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

Với phiên bản mới của chủ đề chất liệu và rung, bạn cũng cần sử dụng tiện ích con "Padding" để có hình ảnh không lấp đầy vùng chứa của nó.

Ví dụ, nếu bạn muốn chèn một hình ảnh tròn trong AppBar, bạn phải sử dụng padding nếu không hình ảnh của bạn sẽ luôn cao bằng AppBar.

Hy vọng điều này sẽ giúp ai đó

InkWell(
        onTap: () {
            print ('Click Profile Pic');
        },
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipOval(
                child: Image.asset(
                    'assets/images/profile1.jpg',
                ),
            ),
        ),
    ),

bạn có thể sử dụng ClipRRect như thế này:

  Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(25),
                    child: Image.asset(
                      'assets/images/pic13.jpeg',
                      fit: BoxFit.cover,
                    ),
                  ),
                )

bạn có thể đặt bán kính của mình hoặc người dùng chỉ cho trên cùng bên trái hoặc dưới cùng bên trái như:

Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25)
                ,bottomLeft: Radius.circular(25)),
                child: Image.asset(
                  'assets/images/pic13.jpeg',
                  fit: BoxFit.cover,
                ),
              ),
            )

Sử dụng ClipRRect với thuộc tính hình ảnh được đặt là phù hợp: BoxFit.fill

ClipRRect(
          borderRadius: new BorderRadius.circular(10.0),
          child: Image(
            fit: BoxFit.fill,
            image: AssetImage('images/image.png'),
            width: 100.0,
            height: 100.0,
          ),
        ),

Sử dụng ClipRRect nó sẽ giải quyết vấn đề của bạn.

      ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              child: Image.network(
                Constant.SERVER_LINK + model.userProfilePic,
                fit: BoxFit.cover,
              ),
            ),

Sử dụng Cách này trong hình ảnh vòng kết nối này cũng đang hoạt động + bạn cũng có trình tải trước cho hình ảnh mạng:

new ClipRRect(
     borderRadius: new BorderRadius.circular(30.0),
     child: FadeInImage.assetNetwork(
          placeholder:'asset/loader.gif',
          image: 'Your Image Path',
      ),
    )

Hãy thử Điều này nó hoạt động tốt.

Container(
  height: 220.0,
  width: double.infinity,
  decoration: BoxDecoration(
    borderRadius: new BorderRadius.only(
      topLeft: Radius.circular(10),
       topRight: Radius.circular(10),
    ),
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage(
        photoUrl,
      ),
     ),
   ),
);

trang trí người dùng Hình ảnh cho một thùng chứa.

  @override
  Widget build(BuildContext context) {
    final alucard = Container(
        decoration: new BoxDecoration(
        borderRadius: BorderRadius.circular(10),
          image: new DecorationImage(
              image: new AssetImage("images/logo.png"),
              fit: BoxFit.fill,
          )
        )
    );