Circle Image (Avatar) with border in Flutter like Instagram

Circle or Circular images always look great.Really, as we’re used to seeing them almost everywhere, and because I couldn’t find any simple sample code to do this. So I thought I could make a really simple one.

In this example I will show a simple screen with circle image or Avatar Image and edge and stroke (in Material Design).

Container(
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                gradient: LinearGradient(//add colors to colors array 
                  colors: [
                    Colors.red,
                    Colors.yellow,
                  ],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
              ),
              child: const Padding(
                padding: EdgeInsets.all(4.0),// stroke
                child: CircleAvatar(
                  backgroundImage: NetworkImage('https://picsum.photos/200'),
                  radius: 50, // resize radius
                ),
              ),
            )

Here’s the result

I hope it worked for you.