Изображение с закругленными углами во флаттере

124

Я использую 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,
    );
  }

следующим образом

введите описание изображения здесь

Лю Силонг
источник
Вы поняли, почему этот метод не работает?
Мартин

Ответы:

359

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

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)
Абди Хамид
источник
9
Спасибо ! Я сделал, как вы сказали, а потом добавил fit: BoxFit.fill, что выглядит неплохо.
Лю Силонг
2
Спасибо - у вас есть идеи, как создать красочную рамку для изображения clipRRect'ed?
iKK
4
@iKK - Оберните его в Контейнер с BoxDecoration с соответствующими опорами border / borderRadius следующим образом: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(3.0), border: Border.all(color: Colors.grey[300])), child: ClipRRect( borderRadius: BorderRadius.circular(3.0), child: Image.network( uri, fit: BoxFit.fill, width: imageDimension, height: imageDimension, ), ), )
Дэниел Аллен,
1
спасибо, совет: работает только с одинаковой шириной и высотой
Альваро Агуэро
50

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

CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)
onmyway133
источник
2
Это лучший ответ. I did extrabackgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture,
saviour123 06
@ saviour123 не каждое изображение с закругленными углами является аватаром. Принято - это общий ответ.
nipunasudha
Невозможно установить высоту или ширину с помощью этого виджета, что проблематично.
papillon
39

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

ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),
CopsOnRoad
источник
2
Самый простой ответ!
Элвин Конда,
1
если дочернее изображение не квадратное, в этом решении обрезка будет эллиптической.
Билал Шимшек
29

Попробуйте вместо этого, сработало для меня:

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,
  ),
),
Faisal Kc
источник
Ваш ответ определенно полезен, спасибо! Но что, если содержимое контейнера - это не просто изображение, а виджет? Любая идея?
Александр
13
   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")
        )
    )),
Симхачалам
источник
5

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

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

В то время как для изображения актива используйте это

ClipOval(
    child: Image.asset(
        'Path to your image',
        fit: BoxFit.cover,
    ),
)
икбен
источник
1
Я уже использовал это как ответ, вы не предоставили ничего полезного. -1 от меня.
CopsOnRoad 02
4

В новой версии флаттера и темы материала вам также необходимо использовать виджет «Padding», чтобы изображение не заполняло свой контейнер.

Например, если вы хотите вставить закругленное изображение в AppBar, вы должны использовать отступы, иначе ваше изображение всегда будет таким же высоким, как AppBar.

Надеюсь, это кому-то поможет

InkWell(
        onTap: () {
            print ('Click Profile Pic');
        },
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipOval(
                child: Image.asset(
                    'assets/images/profile1.jpg',
                ),
            ),
        ),
    ),
Патрик Харапетианс Гешлаг
источник
3

вы можете использовать ClipRRect следующим образом:

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

вы можете установить свой радиус или пользователь только для topLeft или внизу слева, например:

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,
                ),
              ),
            )
сана эбади
источник
2

Используйте ClipRRect с установленным свойством изображения соответствия: 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,
          ),
        ),
Йогеш Алай
источник
1

Используйте ClipRRect, это решит вашу проблему.

      ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              child: Image.network(
                Constant.SERVER_LINK + model.userProfilePic,
                fit: BoxFit.cover,
              ),
            ),
Парас Шарма
источник
0

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

new ClipRRect(
     borderRadius: new BorderRadius.circular(30.0),
     child: FadeInImage.assetNetwork(
          placeholder:'asset/loader.gif',
          image: 'Your Image Path',
      ),
    )
Аджит Сингх
источник
0

Попробуйте, это работает хорошо.

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,
      ),
     ),
   ),
);
терапия30
источник
-1

пользовательское украшение Изображение для контейнера.

  @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,
          )
        )
    );
С.Р. Кешав
источник