In this article we will learn to add rounded border radius to image in flutter. In flutter rounded corner border can be added using borderRadius but to add the rounded border to image is not same because by adding the border radius to container it won’t apply to child image.
In this article i will show you multiple methods to add rounded corner to image. We will use background image to add border radius, ClipRRect, ClipOval and CircleAvatar. In this example i will create a simple image with border radius, width and color of border as well.
Flutter use BoxDecoration class to render the border and borderRadius in container widget it accepts multiple options like border, border radius, color, background image, gradient, shape and etc. so to add the borderRadius first we need to add decoration option to container and then in decoration value we need to assign BoxDecoration class to implement the border.
Let’s implement the methods to add rounded border radius to image in flutter
Method 1 : Using backgroundImage to add rounded border to image
In this method we will use the backgroundImage attribute BoxDecoration to add the rounded border to image
Container(
margin: const EdgeInsets.only(top: 20),
height: 100,
width: 100,
decoration: BoxDecoration(
border: Border.all(color: Colors.red,width: 10),
borderRadius: BorderRadius.circular(50.0),
image: const DecorationImage(
fit: BoxFit.cover,
image: NetworkImage('https://picsum.photos/id/238/200')
),
),
),
Method 2 : Using ClipRRect to add rounded border to image
In this method we will use the ClipRRect to add the rounded border to image
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(105.0),
border: Border.all(color: Colors.red,width: 10)
),
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child:Image.network("https://picsum.photos/200" ),
),
),
Method 3 : Using CircleAvatar to add rounded border to image
In this method we will use the CircleAvatar to add the rounded border to image
Container(
margin: const EdgeInsets.only(top: 20),
height: 100,
width: 100,
decoration: BoxDecoration(
border: Border.all(color: Colors.red,width: 10),
borderRadius: BorderRadius.circular(50.0),
),
child: const CircleAvatar(
backgroundColor: Colors.red,
backgroundImage: NetworkImage('https://picsum.photos/id/237/200'),
radius: 50,
),
),
One side border radius to widget flutter
Sometimes we also want to add border radius to specific one side of widget or container so then we can use BorderRadius.only class named constructor to add the border radius to the one side or any side of container as follow
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0))),
child: const Text(
'Hello, World!',
style: TextStyle(color: Colors.white, fontSize: 30),
),
),
Let’s understand it with example
Step 1 : Create flutter project
Very first step is to create the fluter application using command line tool or in Android studio.
flutter create example_appThis will create a new project with name my_app then go in to the folder .
Step 2 : Create a simple widget
Now, Create a simple state less widget to add a border with image in flutter as follow
File : lib/borderimage.dart
class RoundedImage extends StatelessWidget {
const RoundedImage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.only(top: 40),
color: Colors.white,
child: Column(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(105.0),
border: Border.all(color: Colors.red,width: 10)
),
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child:Image.network("https://picsum.photos/200" ),
),
),
Container(
margin: const EdgeInsets.only(top: 20),
height: 100,
width: 100,
decoration: BoxDecoration(
border: Border.all(color: Colors.red,width: 10),
borderRadius: BorderRadius.circular(50.0),
image: const DecorationImage(
fit: BoxFit.cover,
image: NetworkImage('https://picsum.photos/id/238/200')
),
),
),
Container(
margin: const EdgeInsets.only(top: 20),
height: 100,
width: 100,
decoration: BoxDecoration(
border: Border.all(color: Colors.red,width: 10),
borderRadius: BorderRadius.circular(50.0),
),
child: const CircleAvatar(
backgroundColor: Colors.red,
backgroundImage: NetworkImage('https://picsum.photos/id/237/200'),
radius: 50,
),
),
],
),
);
}
}Step 3: Import and use the widget in main
We just created a new widget with name RoundedImage, now we are going to use it in our main.dart file as below
import 'package:flutter/material.dart';
import 'package:example_app/borderimage.dart';;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: RoundedImage(),
),
),
);
}
}Step 4: Run the project
Simply run the project using command line or in android studio to check the implementation.
flutter run lib/main.dartRead Also : How to add border to container or any widget flutter?
