What is the ClipOval widget in Flutter?
Flutter is an extensive framework that was developed by Google to create beautiful, multi-platform applications using a single codebase. It is free and was released in May 2017.
ClipOval
ClipOval is one of the features in Flutter that allows us to clip a child widget in an oval or circular shape. We can also change the width and height of the child widget (by keeping the width and height, we obtain a circular shape).
Syntax
ClipOval({Key key, CustomClipper<Rect> clipper, Clip clipBehavior: Clip.antiAlias, Widget child})
Properties
ClipBehaviour: In the ClipOval class, clipBehaviour helps us control how the Flutter objects clip. It is clip.none by default. We can set this to the following:
Clip.hardEdgeClip.antiAliasClip.antiAliasWithSaveLayer
Clipper: This specifies the clip that needs to be used in the application which involves, ClipOval, clipRect, ClipRRect, and so on. If this property is set to null, then by default ClipOval takes the object’s boundaries as the area to be clipped.
Code example
import 'package:flutter/material.dart';void main() {runApp(MyApp());}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Example',home: MyHomePAGE(),);}}class MyHomePAGE extends StatefulWidget {@override_MyHomePAGEState createState() => _MyHomePAGEState();}class _MyHomePAGEState extends State<MyHomePAGE> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('asasas'),backgroundColor: Colors.green,),body:child: ClipOval(child: Image.network(// link of image should be provided here'//link',fit: BoxFit.fill),clipper: MyClip(),),backgroundColor: Colors.green,);}}class MyClip extends CustomClipper<Rect> {Rect getClip(Size size) {return Rect.fromLTWH(0, 0, 50, 50);}bool shouldReclip(oldClipper) {return false;}}
Code explanation
We make a Flutter application and use the ClipOval widget. In the child area, we provide the image link. We also make a class in which we provide the size of the clips.
// This is a basic Flutter widget test.
//
// To perform an interaction with a widget in your test, use the WidgetTester
// utility that Flutter provides. For example, you can send tap and scroll
// gestures. You can also use WidgetTester to find child widgets in the widget
// tree, read text, and verify that the values of widget properties are correct.
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:myapp/main.dart';
void main() {
testWidgets('Counter increments smoke test', (WidgetTester tester) async {
// Build our app and trigger a frame.
await tester.pumpWidget(const MyApp());
// Verify that our counter starts at 0.
expect(find.text('0'), findsOneWidget);
expect(find.text('1'), findsNothing);
// Tap the '+' icon and trigger a frame.
await tester.tap(find.byIcon(Icons.add));
await tester.pump();
// Verify that our counter has incremented.
expect(find.text('0'), findsNothing);
expect(find.text('1'), findsOneWidget);
});
}