Изображение закругленных углов в 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,
    );
  }

следующее

Ответ 1

Используйте ClipRRect он будет отлично работать

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

Ответ 2

Вы также можете использовать CircleAvatar, который поставляется с флаттером

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

Ответ 3

Используя ClipRRect вам необходимо жестко закодировать BorderRadius, поэтому, если вам нужны полные циклические ClipOval, используйте вместо этого ClipOval.

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

Ответ 4

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

Ответ 5

Попробуйте на этом пути

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

Ответ 6

Для изображения используйте это

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

Ответ 7

Попробуйте добавить fit: BoxFit.fitHeight в вашу Image.network. Если он не работает, попробуйте удалить высоту с изображения.

Image.network(subject['images']['large'],
              height: 150.0,
              width: 100.0, 
              fit: BoxFit.fitHeight),

Ответ 8

Используйте этот способ в этом круге, изображение также работает + у вас есть предварительный загрузчик также для сетевого изображения:

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