Flutter 带边框圆形头像

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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 eg use "strokeAlign"-Property of the Border.all-Method to define whether the border should use the space inside the CircleAvatar or outside of it.

Answer 4

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