Paint a circular image with border

Flutter has already provides CircleAvatar widget for it.

Container(
  width: 100,
  child: CircleAvatar(
    radius: 50,
    backgroundImage: ExactAssetImage('assets/images/restaurant.jpg'),
  ),
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(
      color: Colors.red,
      width: 4.0,
    ),
  ),
),

Easy Answer

Use two CircleAvatars together. Examples of code & screenshot:

CircleAvatar(               
 backgroundColor: Colors.white,
 radius: 60.0,
  child: CircleAvatar(
   backgroundImage: AssetImage('images/darth_vader.jpg'),
   radius: 50.0,
  ),
),

Two CircleAvatars.


NetworkImage is the class you are looking for.

screenshot

           Container(
             width: 100.0,
             height: 100.0,
             decoration: BoxDecoration(
               color: const Color(0xff7c94b6),
               image: DecorationImage(
                 image: NetworkImage('http://i.imgur.com/QSev0hg.jpg'),
                 fit: BoxFit.cover,
               ),
               borderRadius: BorderRadius.all( Radius.circular(50.0)),
               border: Border.all(
                 color: Colors.red,
                 width: 4.0,
               ),
             ),
           ),

Tags:

Dart

Flutter