ClipRect Widget in Flutter | Androidmonks

ClipRect Widget in Flutter

ClipRect Widget in Flutter is part of the Clippers family. The primary use case of clippers is that they can clip out any portion of the widget as specified. In that way, ClipRect is used to Clip a Rectangle portion of the Widget which is its child.

According to the Flutter Docs, “By default, ClipRect prevents its child from painting outside its bounds, but the size and location of the clip rect can be customized using a custom clipper”.

We will see more about ClipRect Widget in Flutter in this article. To know more about Clippers/ClipRect, you can watch the video below.

ClipRect Basics

ClipRect is Commonly used with the following Widgets. The primary reason being, all of these Widget support painting outside their container. So ClipRect can act as a border and cut all these extra regions!

Some of the commonly used Widgets include. Align, Center, OverflowBox, SizedOverflowBox, CustomPaint.

There are a few properties of ClipRect that are optional to create the actual ClipRect. These are common properties across all clippers so the actions won’t change.

child

The only important attribute of ClipRect. All Clippers take a child with which it creates the boundary. The ClipRect child can be any one of the above-mentioned Widgets. A sample example code is given below for reference.

ClipRect(
child:Align(
child:Image.network("src"),
)
)

This creates a Clipped Rectangle around the Image and acts as a boundary to it!

Another neat trick is to give the Align widget a width & height factor to zoom into the pic but at the same time cut the Rectangle border! This is shown below.

ClipRect(
child:Align(
child:Image.network("src"),
heightFactor:0.5,
widthFactor:0.5
)
)

Since Align Widget acts differently with varying Image Sizes(Read more about how the Align Widget works in the article), make sure to come up with a standard height, width factor to create a ClipRect with Align Widget as its child to maintain consistency.

clipBehavior

ClipBehavior in ClipRect is a common attribute across all Clippers in Flutter. The primary need is to define how the edges are when the Clip is happening.

For eg, the 3 behaviors that Clip has are Clip.hardEdge, Clip.antiAlias, Clip.antiAliasWithSaveLayer.

The need for these is to define how the edges look when the Clip happens. HardEdge creates a not so smooth Edge, while the antiAlias creates a smoother edge that HardEdge and antiAliasWithSaveLayer create the smoothest of edges. It also is recommended to go with the default HardEdge in order to not take time and memory to draw the Edges on the Canvas(The UI).

To know more about ClipBehaviors, check out this space.

ClipRect Widget – Full Example

For this final section, we will create a simple ClipRect around a FlutterLogo to see how exactly the Clipping happens! The best recommendation is to play around with the Align & Container Widget to get the better Clipping as you would expect.

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(AlignmentApp());

class AlignmentApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample Divider Widget',
home: AlignmentWidget(),
);
}
}

class AlignmentWidget extends StatefulWidget {
AlignmentWidget({Key key}) : super(key: key);

@override
_AlignmentWidgetState createState() => _AlignmentWidgetState();
}

class _AlignmentWidgetState extends State {

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sample ClipRect Widget"),),
body: Center(
child: ClipRect(
child: Container(
color:Colors.redAccent,
child: Align(
heightFactor: 0.5,
child: FlutterLogo(
size: 60,
),
),),),
),
);
}
}

This creates a Flutter App which looks like,

ClipRect over a FlutterLogo
ClipRect over a FlutterLogo

ClipRect – Conclusion

The ClipRect widget can further be changed using the clipper attribute. The primary need being to create a custom action over the ClipRect. This, however, is seen as part of the Clipper widget(Base class for all Clippers). You can take a look at that article to understand how any shape can be created and used.

“Learn and Be Curious”

Leave a Comment

Your email address will not be published. Required fields are marked *