如何在扑动圆角图像

我正在使用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,
    );
  }

如下

当前回答

输出:

使用BoxDecoration

Container(
              margin: EdgeInsets.all(8),
              width: 86,
              height: 86,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    image: NetworkImage('https://i.stack.imgur.com/0VpX0.png'),
                    fit: BoxFit.cover
                ),
              ), 
           ),

2020-09-25 13:29:08

其他回答

你也可以使用附带颤振的CircleAvatar

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

2019-03-12 13:54:10

这是我用过的代码。

Container(
  width: 200.0,
  height: 200.0,
  decoration: BoxDecoration(
    image: DecorationImage(image: NetworkImage('Network_Image_Link')),
    color: Colors.blue,
    borderRadius: BorderRadius.all(Radius.circular(25.0)),
  ),
),

谢谢你! !

2021-02-19 20:08:00

对于图像使用这个

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

2019-03-14 09:36:30

试试这个，效果不错。

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

2020-03-14 13:58:16

图片所有侧面圆角尝试这一个

Container(
 // height and width depend on your your requirement.
 height: 220.0,
 width: double.infinity,
 decoration: BoxDecoration(
   // radius circular depend on your requirement
   borderRadius: new BorderRadius.all(
    Radius.circular(10),
    ),
    image: DecorationImage(
    fit: BoxFit.fill,
     // image url your network image url       
      image: NetworkImage(
       "dynamic image url",
     ),
    ),
   ),
 );

2022-08-16 13:08:56

如何在扑动圆角图像

推荐文章

最新文章

标签