Example 1: ClipRRect
dartCopy codeClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.asset('assets/images/image.jpg'),
)
In this example, the ClipRRect
widget is used to clip the child Image
with rounded corners. The borderRadius
property defines the radius of the corners.
Example 2: BoxDecoration
dartCopy codeContainer(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: AssetImage('assets/images/image.jpg'),
fit: BoxFit.cover,
),
),
)
Here, a Container
is used with a BoxDecoration
to apply rounded corners to the image. The borderRadius
property defines the corner radius, and the image
property is set with the desired image asset. The fit
property is used to specify how the image should be fitted inside the container.
Example 3: ClipRRect with Network Image
dartCopy codeClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.network('https://example.com/image.jpg'),
)
In this example, ClipRRect
is used again, but with a network image. The borderRadius
property sets the corner radius, and the child
property is set with Image.network
to fetch the image from the specified URL.
These examples demonstrate different ways to achieve rounded corner images in Flutter. You can choose the approach that best fits your requirements and use it accordingly in your Flutter application.