Paint a circular image with border

Issue

I want to do something like

new BoxDecoration(
        color: const Color(0xff7c94b6),
        image: new DecorationImage(
          image: new ExactAssetImage('assets/images/restaurant.jpg'),
          fit: BoxFit.cover,
        ),
        borderRadius: new BorderRadius.all(new Radius.circular(50.0)),
        border: new Border.all(
          color: Colors.red,
          width: 4.0,

        ),

The visual I am looking for is like the way gmail shows the user's image. This code - which is from the docs - works fine, but my image should be loaded from a url, and is not in the assets.

Solution

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

Answered By - Collin Jackson