CODEWITHSUNDEEP
flutter
Code Error
Code Error

Reputation: 73

Flutter CIrcle Avatar With Border

I am trying to create circle avatar with border in Flutter using CircleAvatar widget like:

CircleAvatar(
    radius: 30,
    backgroundImage: NetworkImage(url),
  ),

How can I add border to the result of this code?

Upvotes: 4

Views: 8290

Answers (4)

Sergej Werfel
Sergej Werfel

Reputation: 1365

Like indicated in comments a quite flexible way is to wrap it inside a Container:

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        border: Border.all(color: Colors.white),
      ),
      child: CircleAvatar(
        // your avatar properties here
      ),
    );
  }

So you can quite freely define how your border should look like e.g. use "strokeAlign"-Property of the Border.all-Method to define whether the border should use the space inside the CircleAvatar or outside of it.

Upvotes: 1

Sandeep Pareek
Sandeep Pareek

Reputation: 1789

only use colors

CircleAvatar(
        backgroundColor: Colors.red,
        radius: 70.0,
        child: CircleAvatar(
          backgroundColor: Colors.orange,
          radius: 60,
        ),
      ),

when use from local storage

CircleAvatar(
        backgroundColor: Colors.white,
        radius: 70,
        child: CircleAvatar(
          backgroundImage: AssetImage("image/bg.jpg"),
          radius: 60,
        ),
      ),

if use image from network

      CircleAvatar(
        backgroundColor: Colors.white,
        radius: 70,
        child: CircleAvatar(
          backgroundImage: NetworkImage(url),
          radius: 60,
        ),
      ),

Upvotes: 0

MD Sazid Hasan Dip
MD Sazid Hasan Dip

Reputation: 1503

Check this link. you will get the code snippet if not here is the code bellow.

the code is;

CircleAvatar(
              radius: 55,
              backgroundColor: Colors.teal,
              child: CircleAvatar(
                radius: 50,
                backgroundImage: NetworkImage('url'),
              ),
            )

Upvotes: -1

saki
saki

Reputation: 166

Wrap CircleAvatar widget within another CircleAvatar widget and then set different radius and backgroundColor to achieve the required border.

Here is the code snippet

CircleAvatar(
    radius: 30,
    backgroundColor: Colors.teal,
    child: CircleAvatar(
      backgroundImage: AssetImage(url),
      radius: 28,
    ),
  ),

Code Snippet Link

Upvotes: 14

Related Questions