Изображение Flutter Network не подходит для кругового аватара

Я пытаюсь получить кучу изображений из API. Я хочу, чтобы изображения отображались в круговой форме, поэтому я использую виджет CircleAvatar, но продолжаю получать изображения в квадратном формате. Вот скриншот картинок

Вот код, который я использую

ListTile(leading: CircleAvatar(child: Image.network("${snapshot.data.hitsList[index].previewUrl}",fit: BoxFit.scaleDown,)),),

Я tryied, используя все свойства BoxFit как cover, contain, fitWidth, fitHeight и т.д., но ни один из них не работает.

Ответ 1

Это будет работать: вам нужно использовать свойство backgroundImage: чтобы поместить его в круг.

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage("${snapshot.data.hitsList[index].previewUrl}"),
                backgroundColor: Colors.transparent,
              )

Чтобы проверить с помощью фиктивного заполнителя:

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,
              )

Ответ 2

Была похожая проблема в AppBar виджетов действий AppBar.

Это сработало для меня:

CircleAvatar(
    radius: 18,
    child: ClipOval(
        child: Image.network(
          'image-url',
        ),
    ),
),

Ответ 3

Если вы не хотите использовать CircleAvatar, вот как вы можете это сделать.

ClipOval(
  child: Image.network(
    'https://via.placeholder.com/150',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
),

Ответ 4

В этом случае вы можете использовать:

CircleAvatar(
  radius: 50.0,
  backgroundImage: NetworkImage("https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg-1024x683.jpg"),
)

или

CircleAvatar(
  radius: 50.0,
  backgroundImage: AssetImage("assets/images/profile.jpg"),
)

работает правильно...

Ответ 5

Вот круглая картинка с тенью:

child: AspectRatio(
    aspectRatio: 1/1,
    child: Container(
        margin: EdgeInsets.all(
            10.0
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100.0),
            boxShadow:[
              BoxShadow(
                  color: Color.fromARGB(60, 0, 0, 0),
                  blurRadius: 5.0,
                  offset: Offset(5.0, 5.0)
              )
            ],
            image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(user.image)
            )
        )
    )
)

Ответ 6

  ClipOval(
     child: Image.asset(
      'assets/dummy.jpg',
       fit: BoxFit.contain,
       matchTextDirection: true,
       height: 50,
   ))

Ответ 7

Используйте комбинацию width/height, fit и изображения обтекания в ClipOval, как показано ниже:

CircleAvatar(
    child: ClipOval(
        child: Image.network(
            _photo,
            width: 120,
            fit: BoxFit.fill
        ),
    ),
    radius: 50,
),