Circle Avatar Profile with border in Flutter

In your app may contain the drawer part which it also has the user profile in it. Today I am going show how we can do the user profile avatar and stroke outside in flutter.

Here is the example image that I am going to talk about in this.

So in here we have Circle Avatar, person icon with white border outside.

To Create Circle Avatar

CircleAvatar(
  backgroundColor: Color(0xffE6E6E6),
  radius: 30,
  child: Icon(
    Icons.person,
    color: Color(0xffCCCCCC),
  ),
),

This only create Circle Avatar without border.

To add Border you can do like:

CircleAvatar(
    backgroundColor: Colors.white,
    child: CircleAvatar(
      backgroundColor: Color(0xffE6E6E6),
      radius: 30,
      child: Icon(
        Icons.person,
        color: Color(0xffCCCCCC),
      ),
    ),

This should work. 😉