Circular Image View - Flutter

We have seen many applications transitioning from that traditional square profile previews to these modern and more cool circular ones. Really, we are now used to see them everywhere. 

I tried finding a proper code to achieve this but couldn't succeed, so I decided that I should make a simple one for you.

In this example code, I will show how you can make an image circular.

The code looks like this

 new Container(  
    width: 190.0,  
    height: 190.0,  
    decoration: new BoxDecoration(  
      shape: BoxShape.circle,  
      image: new DecorationImage(  
      fit: BoxFit.cover,  
      image: new NetworkImage(  
          "https://images.pexels.com/photos/1058194/pexels-photo-1058194.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")  
          )  
 )),  

In the above code, I loaded a Network Image. You can choose between the Network image or Assetet image according to your use case.

Explanation

Widget Container is given an equal height and width. The decoration parameter contains a BoxDecoration image which is used to give custom shapes and here it is used to provide a circular shape to the container(BoxShape.circle).

The image parameter of the BoxDecoration Contains a DecorationImage widget which in turn populates the NetworkImage on the screen.

App Example

The full source code for the app is given below.

Conclusion 

You just learned how you can use make any image circular in Flutter using Box Decoration. However, if you think you need this at any later time consider bookmarking this.

If you have any questions you can ask me in the comment section.