Rounded Corner Image in Flutter
Last Updated :
24 Jan, 2023
Rounded images or avatars are commonly used in many mobile applications, including those built with Flutter. There are several ways to create rounded images in Flutter, some of which include:
- Using the ClipRRect widget: As I mentioned earlier, the ClipRRect widget can be used to clip an image and create rounded corners.
- Using the Container widget with BoxDecoration: You can use the Container widget to create a container for your image, and then use BoxDecoration to set the shape property to BoxShape.circle to create a circular avatar.
- Using a CustomPainter: This is a more advanced method, but it allows you to create a custom shape for your avatar.
- Using the CircleAvatar widget: This widget is specifically designed to create circular avatars. It takes an Image or Icon as a child and automatically clips it into a circle.
- Using ClipOval: This is another way to clip an image into a circular shape, similar to CircleAvatar
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Material Package
A material package gives us the essential functions and Parameters, Now call the runApp method that needs an Application in the main function.
import 'package:flutter/material.dart';
void main() {
runApp(RunMyApp());
}
In the above code, runApp method calls the class RunMyApp, Now we have to create it.
Step 3: Creating Stateless Widget
Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application.
Shortcut for creating a stateless or Stateful widget: You can create a stateless widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter.
class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp();
}
}
Step 4: Working with Scaffold Widget
Give the home property and there can be a scaffold widget with AppBar and body property. AppBar allows us to give the title of AppBar, color, leading, and trailing icon.
home: Scaffold(
appBar: AppBar(
title: Text('Grid Paper'),
),
body:
),
Step 5: Making a Rounded Image
Now we can simply use the following widgets and assign its parameter to make the image rounded.
1. Circular Image (without border)
Using CircleAvatar:
Dart
CircleAvatar(
radius: 48,
backgroundImage: AssetImage( 'assets/gfglogo.png' ),
),
|
Using ClipRRect:
Dart
ClipOval(
child: SizedBox.fromSize(
size: Size.fromRadius(48),
child: Image.asset( 'assets/gfglogo.png' , fit: BoxFit.cover),
),
),
|
Output: Same for Both the Methods
2. Circular Image (with border)
Using CircleAvatar:
Dart
CircleAvatar(
radius: 56,
backgroundColor: Colors.green,
child: Padding(
padding: const EdgeInsets.all(8),
child: ClipOval(child: Image.asset( 'assets/gfglogo.png' )),
),
)
|
Using ClipRRect:
Dart
Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(color: Colors.green, shape: BoxShape.circle),
child: ClipOval(
child: SizedBox.fromSize(
size: Size.fromRadius(48),
child: Image.asset( 'assets/gfglogo.png' , fit: BoxFit.cover),
),
),
)
|
Output: Same for Both the Method
Share your thoughts in the comments
Please Login to comment...