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,
),
),
NetworkImage
is the class you are looking for.
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,
),
),
),