Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CircleAvatar not showing circular image

Tags:

flutter

dart

I am using CicleAvatar to show my avatar but it is not showing circular shape. Here is my code

  //Circle Image
  Widget circularImage(){
    return new CircleAvatar(
        radius: 45,
        child: CachedNetworkImage(
          imageUrl: this.strImageURL,
          placeholder: new CircularProgressIndicator(),
          errorWidget: new Icon(Icons.error),
        )
    );
  }
like image 442
Code Hunter Avatar asked Dec 13 '22 13:12

Code Hunter


1 Answers

You can wrap your cachedNetworkImage in ClipRRect widget like this:

Widget circularImage(){
    return CircleAvatar(
        radius: 45,
        child: ClipRRect(
            borderRadius: BorderRadius.circular(45),
            child: CachedNetworkImage(
              imageUrl: this.strImageURL,
              placeholder: new CircularProgressIndicator(),
              errorWidget: new Icon(Icons.error),
            ),
        ),
    );
  }
like image 153
dshukertjr Avatar answered Jan 25 '23 00:01

dshukertjr