In this article, I'm going to show you how to get rounded edges for an image in flutter.
This is how the final output is going to look. You can see the image with rounded edges.
![](https://fluttercentral.com/Uploads/afdcdfb5-55ef-416d-b5bf-d62fde14ec76.PNGwidth="50%height="auto](
First of all, take the below is a sample app which has an image with usual edges.
![](https://fluttercentral.com/Uploads/5593b011-e994-4348-95b6-821c438b9371.PNGwidth="50%height="auto](
And below is the code for it,Note: In order for the below code to work for you, you need to add images to your project and reference that inside pubspec.yaml in assets session.
color: rgb(187, 187, 187); background-color: rgb(40, 44, 52); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #c678dd;](import color: #98c379;]('package:flutter/material.dart';
color: #c678dd;](void color: #61afef;](main() { color: #61afef;](runApp(color: #e5c07b;](MyApp());}
color: #c678dd;](class color: #e5c07b;](MyApp color: #c678dd;](extends color: #e5c07b;](StatelessWidget { color: #c678dd;](@override color: #e5c07b;](Widget color: #61afef;](build(color: #e5c07b;](BuildContext context) { color: #c678dd;](return color: #e5c07b;](MaterialApp( titlecolor: #c678dd;](: color: #98c379;]('Flutter Demo', homecolor: #c678dd;](: color: #e5c07b;](Scaffold( appBarcolor: #c678dd;](: color: #e5c07b;](AppBar( titlecolor: #c678dd;](: color: #e5c07b;](Text(color: #98c379;]('Flutter Demo'), ), bodycolor: #c678dd;](: color: #e5c07b;](Center( childcolor: #c678dd;](: color: #e5c07b;](Container( paddingcolor: #c678dd;](: color: #e5c07b;](EdgeInsets.color: #61afef;](all(color: #d19a66;](30.0), childcolor: #c678dd;](: color: #e5c07b;](Image.color: #61afef;](asset( color: #98c379;]('images/lake.jpg', ), ), ), ), ); }}
So, now in order to achieve rounded edges for your images, you are going to wrap your image inside a ClipRRect widget.
This is how you do it,
color: rgb(187, 187, 187); background-color: rgb(40, 44, 52); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;]( color: #7f848e;font-style: italic;](// Copyright 2017 The Chromium Authors. All rights reserved. color: #7f848e;font-style: italic;](// Use of this source code is governed by a BSD-style license that can be color: #7f848e;font-style: italic;](// found in the LICENSE file.
import color: #98c379;]('package:flutter/material.dart'; color: #7f848e;font-style: italic;](// Uncomment lines 7 and 10 to view the visual layout at runtime. color: #7f848e;font-style: italic;](//import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
color: #c678dd;](void color: #61afef;](main() { color: #7f848e;font-style: italic;](//debugPaintSizeEnabled = true; color: #61afef;](runApp(color: #e5c07b;](MyApp());}
color: #c678dd;](class color: #e5c07b;](MyApp color: #c678dd;](extends color: #e5c07b;](StatelessWidget { color: #c678dd;](@override color: #e5c07b;](Widget color: #61afef;](build(color: #e5c07b;](BuildContext context) { color: #c678dd;](return color: #e5c07b;](MaterialApp(titlecolor: #c678dd;](: color: #98c379;]('Flutter Demo',homecolor: #c678dd;](: color: #e5c07b;](Scaffold(appBarcolor: #c678dd;](: color: #e5c07b;](AppBar(titlecolor: #c678dd;](: color: #e5c07b;](Text(color: #98c379;]('Flutter Demo'),),bodycolor: #c678dd;](: color: #e5c07b;](Center(childcolor: #c678dd;](: color: #e5c07b;](Container(paddingcolor: #c678dd;](: color: #e5c07b;](EdgeInsets.color: #61afef;](all(color: #d19a66;](30.0),childcolor: #c678dd;](: color: #e5c07b;](ClipRRect(borderRadiuscolor: #c678dd;](: color: #e5c07b;](BorderRadius.color: #61afef;](circular(color: #d19a66;](20.0),childcolor: #c678dd;](: color: #e5c07b;](Image.color: #61afef;](asset( color: #98c379;]('images/lake.jpg',),)),),),);}}
Hope this example is useful to you guys.
Thanks,Srikanth