Flutter의 둥근 모서리 이미지


120

영화에 대한 정보 목록을 만들기 위해 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,
    );
  }

다음과 같이

여기에 이미지 설명 입력


이 방법이 작동하지 않는 이유를 알아 냈습니까?
Martin

답변:


355

ClipRRect그것을 사용 하면 완벽하게 작동합니다

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

9
감사 ! 나는 당신이 말한대로 그것을 한 다음 추가 fit: BoxFit.fill했습니다. 꽤 좋아 보입니다.
리우 Silong

2
감사합니다-clipRRect 이미지에 다채로운 테두리를 만드는 방법에 대한 아이디어가 있습니까?
iKK

3
@iKK - 적절한 경계와 BoxDecoration와 용기에 랩이 / 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

CircleAvatarflutter와 함께 제공되는를 사용할 수도 있습니다 .

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

2
이것이 최고의 답변입니다. 나는 여분을했다backgroundImage: member[index].picture == null ? Image(image: AssetImage('assests/no-image.png')) : NetworkImage( member[index].picture,
saviour123

@ saviour123 모서리가 둥근 모든 이미지가 '아바타'는 아닙니다. 받아 들여진 것은 일반적인 대답입니다.
nipunasudha

이 위젯으로 높이 또는 너비를 설정할 수 없습니다. 문제가 있습니다.
빠삐용

38

을 사용 ClipRRect하면 하드 코딩 BorderRadius이 필요하므로 완전한 순환이 필요한 경우 ClipOval대신 사용하십시오.

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

2
가장 간단한 대답!
Alvin Konda

1
자식 이미지가 정사각형이 아닌 경우이 솔루션에서는 타원이됩니다.
Bilal Şimşek

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

귀하의 질문은 확실히 도움이됩니다. 감사합니다! 하지만 컨테이너의 콘텐츠가 단순한 이미지가 아니라 위젯이라면 어떨까요? 어떤 생각?
Oleksandr

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

4

새 버전의 flutter 및 머티리얼 테마를 사용하면 컨테이너를 채우지 않는 이미지를 갖기 위해 "패딩"위젯도 사용해야합니다.

예를 들어 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 또는 bottom left에 대해서만 설정할 수 있습니다.

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

-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,
          )
        )
    );
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.