In any good app, images are one of the key essentials. Image handling has always been a tricky part for developers. Developers always want some sort and easy method to handle the shape and size of the image. Flutter has come up with a very quick fix for this issue we face with a very handy Widget.
In this blog, I’ll be taking you through the overview, usage, and implementation of a widely popular widget known as ClipOval.
Table Of Contents:
What is ClipOval?:
ClipOval is a widget that can be used to wrap any image into circular or oval form. It does not matter whether the image is square, rectangular, or any other shape. The size and location of a clip oval can be customized using child class.
The ClipOval widget does have some standard rules which it follows while its application on images for an eg a square image will be converted into a circular image, an image having any dimensions longer than the counterpart will be elongated into that direction. However, the shape will remain oval.
Constructor:
We need to use the below constructor to use the ClipOval widget in our code.
const ClipOval({Key? key, this.clipper,
this.clipBehavior = Clip.antiAlias,
Widget? child})
: assert(clipBehavior != null),
super(key: key, child: child);Properties:
- > Child-This property is used to define the parent builder widget under which it is being passed.
- > ClipBehaviour– It controls the clipping behavior of the ClipOval widget on which it has been passed to. It must not be set to null or clip. none. There is further three behavior that can be passed under this property.
➤ Clip.hardEdge
➤ Clip.antiAlias
➤ Clip.antiAliasWithSaveLayer
- > CustomClipper<Rect>? Clipper– If it has been passed as non-null then it determines which clip should be used. It is used to create custom-shaped clipped images. We can pass dimensions as per our requirements.
Code Implementation:
Create a new dart file called main.dart inside the lib folder.
After which we will create a class inside the main.dart file.First, we will try to implement the ClipOval widget in its default form that means we won’t be using the custom clipper.
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Devs'),
backgroundColor: Colors.blue,
),
body: Center(
child: ClipOval(
child: Image.network(
'https://images.unsplash.com/photo-1561731216-c3a4d99437d5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80',
fit: BoxFit.fill),
),
),
backgroundColor: Colors.lightBlue[50],
);
}
}Here we are simply creating a new class and then passing the image in the scaffold widget. To get the desired oval shape we have wrapped the image in ClipOval.
Now we will try the same image using a custom clipper in the below code. For doing this we will create a custom clipper method in a whole new class. We will extend the class to Customclipper<Rect>.
class MyClip extends CustomClipper<Rect>To make sure that our clipper works as per our requirement we will pass two methods getClip and shouldReclip.
class MyClip extends CustomClipper<Rect> {
Rect getClip(Size size) {
return Rect.fromLTWH(50, 0, 300, 300);
}
bool shouldReclip(oldClipper) {
return false;
}
}The getClip method takes the size of the child and returns to Rect into which flutter will draw the oval. Also, you can place this Rect anywhere and give it any size as per your requirement regardless of the child’s size.
The second method is just a cross-check for flutter to check whether there is any need to clip the image again or not. It takes the boolean value as a return argument. Normally we should return it as false as we have already met the requirement in the getClip method we created.
Code Files:
import 'package:flutter/material.dart';
void main() {
runApp(DemoApp());
}
class DemoApp extends StatelessWidget {
// This widget is
//the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ClipOval',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: DemoPage(),
debugShowCheckedModeBanner: false,
);
}
}
class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Devs'),
backgroundColor: Colors.blue,
),
body: Center(
child: ClipOval(
child: Image.network(
'https://images.unsplash.com/photo-1561731216-c3a4d99437d5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80',
fit: BoxFit.fill),
clipper: MyClip(),
),
),
backgroundColor: Colors.lightBlue[50],
);
}
}
class MyClip extends CustomClipper<Rect> {
Rect getClip(Size size) {
return Rect.fromLTRB(0, 100, 100, 100);
}
bool shouldReclip(oldClipper) {
return false;
}
}Conclusion:
In the end, clipOval is a widget that can be quite handy while dealing with images. We don’t have to go through the inner structures of the code and worry about shape and size. Rather we can directly import this widget and acquire our desired dimensions.
Thanks for reading the entire article. It was just a small overview of the clipOval widget its functionality and implementation. I hope the time you spent reading this article turns out to be productive. You can try implementing and modifying this code as per your needs. Feel free to reach out to me for any suggestions or corrections where I can improve.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
