Блог

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

  CachedNetworkImage(
    imageUrl:'url_to_image',
    imageBuilder: (context,imageProvider) =>
    Container(
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            //this board being created inside the circle - not outside like other borders
            border: Border.all(
                color: const Color(0x24ffffff),
                width: 11),
            image: DecorationImage(
                image: imageProvider,
                fit: BoxFit.fill
                )
            )
    ),
 

Для этого вам нужно завернуть изображение CachedNetworkImage в контейнер

 Container(
  decoration: BoxDecoration(
  border: Border.all(color:Colors.black),
  shape: BoxShape.circle),
  child: CachedNetworkImage(
     //Your code
  ),
)
 

Вы можете обернуть использование 2контейнеров в ImageBuilder. 1-й будет использоваться для границы.

  CachedNetworkImage(
              width: 400,
              height: 400,
              imageUrl:
                  'https://image.shutterstock.com/image-photo/closeup-on-smartphone-display-screen-260nw-1218889750.jpg',
              imageBuilder: (context, imageProvider) => Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  //this board being created inside the circle - not outside like other borders
                  border: Border.all(color: const Color(0x24ffffff), width: 11),
                  // image:
                  //     DecorationImage(image: imageProvider, fit: BoxFit.fill),
                ),
                child: Container(
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    //this board being created inside the circle - not outside like other borders
                    // border:
                    //     Border.all(color: const Color(0x24ffffff), width: 11),
                    image:
                        DecorationImage(image: imageProvider, fit: BoxFit.fill),
                  ),
                ),
              ),
            ),