How to Create a Circular Image in Flutter

While it may not be the most popular design trend in mobile app development, creating a circular image can still be a great way to stand out from the crowd. This type of image can be used for a variety of purposes, such as highlighting a product or service, drawing attention to a particular section of an app, or simply adding some visual interest to an otherwise mundane user interface.

Creating a circular image in Flutter is actually quite simple, thanks to the built-in ClipOval widget. This widget takes a child widget and clips it so that it has an oval shape. To create a circular image, we just need to use the ClipOval widget with an Image widget as the child.

Container(
  decoration:
      BoxDecoration(color: Colors.red, shape: BoxShape.circle),
  height: 300,
  width: 300,
  child: ClipOval(
    child: Image.network(
        "https://cdn.pixabay.com/photo/2017/03/01/05/13/table-setting-2107600_960_720.jpg", fit: BoxFit.fitHeight,),
  ),
)

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close