CODEWITHSUNDEEP
dartflutter
Arash
Arash

Reputation: 12415

Paint a circular image with border

I want to do something like 

new BoxDecoration(
        color: const Color(0xff7c94b6),
        image: new DecorationImage(
          image: new ExactAssetImage('assets/images/restaurant.jpg'),
          fit: BoxFit.cover,
        ),
        borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
        border: new Border.all(
          color: Colors.red,
          width: 4.0,

        ),

The visual I am looking for is like the way gmail shows the user's image. This code - which is from the docs - works fine, but my image should be loaded from a url, and is not in the assets.

Upvotes: 50

Views: 67957

Answers (14)

Abdullah Razzaq
Abdullah Razzaq

Reputation: 119

This will create a border inside an image:

CircleAvatar(
  radius: 42,
  backgroundColor: Theme.of(context).primaryColor,
  child: CircleAvatar(
    radius: 40,
    backgroundColor: Colors.white,
    child: CircleAvatar(
      radius: 28,
      backgroundColor: Colors.white,
      child: Image.asset(
        _brand.imagePath,
        filterQuality: FilterQuality.high,
      ),
    ),
  ),
),

Upvotes: 1

Padfoot
Padfoot

Reputation: 53

Use Padding widget to give border to network/asset image. Using CircleAvatar wraped with CircleAvatar is not responsive UI.

Example:

 CircleAvatar(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Image.asset(
      'images/logo.png',
      color: whiteColor,
    ),
  ),
);

Upvotes: 1

Imran Sefat
Imran Sefat

Reputation: 773

Container(
  decoration: BoxDecoration(
    border: Border.all(
     color: Colors.white,
    ),
    shape: BoxShape.circle,
  ),
  child: CircleAvatar(
    radius: 30,
    backgroundImage: NetworkImage(ytUserImage3),
  ),
),

Upvotes: 1

Richardd
Richardd

Reputation: 1012

For those of you that want to create circle or a quare with rounded corners with blur

        ClipRRect(
          borderRadius: BorderRadius.circular(12),
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
            child: Container(
              width: 50.0,
              height: 50.0,
              child: Icon(Icons.search_rounded, color: Colors.white,),
              decoration: BoxDecoration(
                color: Colors.grey.withOpacity(0.1),
                borderRadius: BorderRadius.all( Radius.circular(12.0)),
                border: Border.all(
                  color: Colors.white,
                  width: 1.0,
                ),
              ),
            ),
          ),
        ),

enter image description here

Upvotes: 8

Maharramoff
Maharramoff

Reputation: 1021

Flutter has already provides CircleAvatar widget for it.

Container(
  width: 100,
  child: CircleAvatar(
    radius: 50,
    backgroundImage: ExactAssetImage('assets/images/restaurant.jpg'),
  ),
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(
      color: Colors.red,
      width: 4.0,
    ),
  ),
),

Upvotes: 35

Collin Jackson
Collin Jackson

Reputation: 116708

NetworkImage is the class you are looking for.

screenshot

           Container(
             width: 100.0,
             height: 100.0,
             decoration: BoxDecoration(
               color: const Color(0xff7c94b6),
               image: DecorationImage(
                 image: NetworkImage('http://i.imgur.com/QSev0hg.jpg'),
                 fit: BoxFit.cover,
               ),
               borderRadius: BorderRadius.all( Radius.circular(50.0)),
               border: Border.all(
                 color: Colors.red,
                 width: 4.0,
               ),
             ),
           ),

Upvotes: 144

Cyrax
Cyrax

Reputation: 827

Relative approach when a parent constraints the bound:

CircleAvatar(
  constraints: const BoxConstraints.expand(),
  child: Padding(
    padding: const EdgeInsets.all(3.0),
    child: CircleAvatar(
      backgroundImage: avatar,
    ),
  ),
)

enter image description here

Upvotes: 3

Robbendebiene
Robbendebiene

Reputation: 4869

For those who want the border to be outside of the image in other words, around the image:

class FramedImage extends StatelessWidget {
  final ImageProvider image;
  final double borderWidth;
  final Color borderColor;
  final double borderRadius;

  const FramedImage({
    required this.image,
    this.borderWidth = 2,
    this.borderColor = Colors.black,
    this.borderRadius = 2,
    Key? key
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(borderRadius + borderWidth),
        border: Border.all(width: borderWidth, color: borderColor),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(borderRadius),
        child: Image(
          image: image,
          fit: BoxFit.cover,
        )
      )
    );
  }
}

Example usage:

FramedImage(
  image: NetworkImage('https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png'),
  borderColor: Colors.blueAccent,
  // adjust this if you want a complete circle
  borderRadius: 10,
  borderWidth: 5,
);

Upvotes: 2

canerkaseler
canerkaseler

Reputation: 7468

Easy Answer

Use two CircleAvatars together. Examples of code & screenshot:

CircleAvatar(               
 backgroundColor: Colors.white,
 radius: 60.0,
  child: CircleAvatar(
   backgroundImage: AssetImage('images/darth_vader.jpg'),
   radius: 50.0,
  ),
),

Two CircleAvatars.

Upvotes: 73

Jitesh Mohite
Jitesh Mohite

Reputation: 34170

Use avatar_view lib which provides the functionality to show network/asset images in circular/rectangular form.

To use add below dependency

Example:

    AvatarView(
              radius: 60,
              borderWidth: 8,
              borderColor: Colors.yellow,
              avatarType: AvatarType.CIRCLE,
              backgroundColor: Colors.red,
              imagePath:
                  "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
              placeHolder: Container(
                child: Icon(Icons.person, size: 50,),
              ),
              errorWidget: Container(
                child: Icon(Icons.error, size: 50,),
              ),
            ),

Output:

enter image description here

Upvotes: -1

Emir Çetin
Emir Çetin

Reputation: 91

If you are using CircleAvatar without giving radius, you can use it this way.

CircleAvatar(
                backgroundColor: Colors.white, //border color
                child: Padding(
                  padding: const EdgeInsets.all(2.0), //border size
                  child: CircleAvatar(
                    backgroundImage: Image.asset("image.png"),
                  ),
                ),
              ),

Upvotes: 4

jimmy john
jimmy john

Reputation: 99

CircleAvatar(
          radius: 30,
          backgroundColor: Colors.white,
          child: CircleAvatar(
            radius: 28,
            backgroundImage: AssetImage('images/avatar.jpg'),
          ),
        )

Upvotes: 9

Mukul Pathak
Mukul Pathak

Reputation: 477

Use fadeInImage as recommended by flutter community to display images from network and enclosed in a container with a border decoration

  Widget getCircularImage(double size) {
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        color: const Color(0xff7c94b6),
        borderRadius: new BorderRadius.all(new Radius.circular(size / 2)),
        border: new Border.all(
          color: Colors.white,
          width: 4.0,
        ),
      ),
      child: ClipOval(child: FadeInImage.assetNetwork(
          fit: BoxFit.cover,
          placeholder: widget.placeholderUrl,
          image: widget.imageUrl)),
    );
  }

Upvotes: 8

user11581761
user11581761

Reputation: 

 Container(
        height: 150.0,
        width: 150.0,
        child: Padding(
            padding: EdgeInsets.all(15),
            child: CircleAvatar(
              backgroundColor: Colors.transparent,
              radius: 10,
              child: new Image.asset('images/logo.png'),
            )),
        decoration: new BoxDecoration(
          shape: BoxShape.circle,
          border: new Border.all(
            color: Colors.indigo,
            width: 2.0,
          ),
        ));

Upvotes: 2

Related Questions