How to Create Rounded Corners Image in Flutter?

· 2 min read
Rounded Corner Image In Flutter
Rounded Corner Image In Flutter

Nowadays almost every application requires setting a rounded corner Image. In today’s article, we will go through How to Create Rounded Corners Image in Flutter?

How to Create Rounded Corners Image in Flutter?

  • Use ClipRRect it will work perfectly.
ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)
  • You can also use CircleAvatar, which comes with Flutter.
CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)
  • Using ClipRRect you need to hardcode BorderRadius, so if you need complete circular stuff, use ClipOval.
ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),
  • Users can also try the below way.
Container(
  width: 100.0,
  height: 150.0,
  decoration: BoxDecoration(
    image: DecorationImage(
        fit: BoxFit.cover, image: NetworkImage('Path to your image')),
    borderRadius: BorderRadius.all(Radius.circular(8.0)),
    color: Colors.redAccent,
  ),
),

Conclusion:

In this article, we have been through How to Create Rounded Corners Image in Flutter?

Keep Learning!!

Do let us know if we can be your flutter assistance?

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply