Skip to main content

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.