Thursday, June 25, 2020



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.
Previous Post
Next Post

post written by:

Hi, Navjyot Singh is a coder, content maker and a freelance developer who's pursuing an undergraduate Engineering degree in Computer Science. He started out as a web developer but later picked up the mobile as his favourite platform to develop applications. A Writer by day and coder by night is loathed to discuss himself as the third person but can be persuaded to do so from time to time.

0 comments: