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

Question

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

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

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

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

Answer 1

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

Answer 2

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

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

, работающие корректно ...

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

Это сработает: вам нужно использовать свойство 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,
              )