Flutter CIrcle Avatar With Border

user_13691986 0
Viewed 4147

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?

flutter
3 Answers

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

user_38161880

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

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