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, ), ),
In this article, we have been through How to Create Rounded Corners Image in Flutter?
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 Guide, Flutter Projects, Code 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.