Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
ClipRect and ClipRRect Widget
2.1.
ClipRect Widget in Flutter
2.1.1.
Constructors
2.2.
ClipRect Widget in Flutter
2.2.1.
Constructor
2.2.2.
Methods
2.3.
Properties of ClipRect and ClipRRect Widget
3.
Frequently Asked Questions
3.1.
What is ClipRRect?
3.2.
How do you use ClipOval in Flutter?
3.3.
How do you clip a widget in Flutter?
4.
Conclusion
Last Updated: Mar 27, 2024

Flutter ClipRect and ClipRRect Widget

Author Sanjana Yadav
0 upvote
Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

Clipper widgets are used to clip the child widget into various shapes and sizes. It keeps the child from drawing outside the lines. In this article, we will implement a demo of ClipRect and ClipRRect Widget in a Flutter application.

ClipRect and ClipRRect Widget

ClipRect Widget in Flutter

The ClipRect widget is used to clip a rectangle around its child. It has links to the Clippers family. Clippers are mostly used to remove any section of a widget as needed. It works similarly to ClipRRect in that it is used to clip a Rectangle area of the child widget but without the rounded corners.

Constructors

Syntax:
ClipRect(
{Key key, 
CustomClipper<Rect> clipper, 
Clip clipBehavior: Clip.hardEdge, 
Widget child})

 

Example

In this example, we will clip the image below into our app:

Code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp 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: MyHomePAGE(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePAGE extends StatefulWidget {
  @override
  _MyHomePAGEState createState() => _MyHomePAGEState();
}

class _MyHomePAGEState extends State<MyHomePAGE> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Welcome to Coding Ninjas!'),
        backgroundColor: Colors.orange,
      ),
      body: Center(
          child: ClipRect(
        child: Align(
          alignment: Alignment.topCenter,
          heightFactor: 0.5,
          child: Image.network('https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014__340.jpg'),
        ),
      )),
      backgroundColor: Colors.lightBlue[50],
    );
  }
}

class MyClip extends CustomClipper<Rect> {
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 100, 100);
  }

  bool shouldReclip(oldClipper) {
    return false;
  }
}

Output

ClipRect Widget in Flutter

ClipRRect is a widget that uses a round import to clip your child. It belongs to the Clippers family. The clippers' primary role is to print whatever section of the widget is required. It is similar to ClipRect. It is used to trim the child widget's import section. ClipRect has its own side based on its needs. Circulars are possible. We can create widgets based on our specifications. Clippers and ClipBehavior are two of its properties. What occurs with clippers is that a custom clipper is used to describe how the text will be clipped, and the clippings are clipped based on this choice in the clip behavior property.

Constructor

syntax:
ClipRRect(
{Key key,
BorderRadius borderRadius: BorderRadius.zero,
CustomClipper<RRect> clipper, 
Clip clipBehavior: Clip.antiAlias, 
Widget child})

Methods

createRenderObject (BuildContext context): The object sent to this method is RenderClipRect. RenderObjectWidget provides setup instructions for generating the RenderObject class.

Syntax

@override
RenderClipRect createRenderObject (BuildContext context)
override

 

debugFillProperties (DiagnosticPropertiesBuilder properties): This function allocates an extra property linked with the node using void as the object.

Syntax

@override
void debugFillProperties ( DiagnosticPropertiesBuilder properties ) 
override

 

didUnmountRenderObject(covariant RenderClipRect renderObject): The object of this function is also void. When a widget is removed from the widget tree, it is replaced with another widget of the same type.

Syntax

@override 
void didUnmountRenderObject ( covariant RenderClipRect renderObject )
override

 

Example

We'll use a rounded corner rectangle to trim the image below:

Code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp 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: MyHomePAGE(),
      debugShowCheckedModeBanner: false,
    );
  }
}
class MyHomePAGE extends StatefulWidget {
  @override
  _MyHomePAGEState createState() => _MyHomePAGEState();
}
class _MyHomePAGEState extends State<MyHomePAGE> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Coding Ninjas!'),
          backgroundColor: Colors.orange,
        ),
        body: Center(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(15),
            child: Image.network('https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014__340.jpg'),
          ),
        ));
  }
}

class MyClip extends CustomClipper<Rect> {
  Rect getClip(Size size) {
    return Rect.fromLTWH(20, 20, 100, 100);
  }

  bool shouldReclip(oldClipper) {
    return false;
  }
}

Output

Explanation: 

First, create a stateless widget for the main app.

Second, create your desired main widget.

Using the scaffold widget, create the Appbar.

Now, insert the ClipRect widget inside the scaffold widget's body and center it using the center widget.

Properties of ClipRect and ClipRRect Widget

children: The widgets in the tree that are below this widget.

hashCode: This object's hash code.

key: Determines how one widget replaces another in the tree.

runtimeType: A representation of the object's runtime type.

clipBehaviour: Determines how to clip.

clipper: If non-null, the clipper selects which clip to use.

borderRadius: The rounded corners' border-radius.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

What is ClipRRect?

ClipRRect class Null safety. A widget that uses a rounded rectangle to clip its child. ClipRRect uses its own limits as the clip's base rectangle by default, but the size and placement of the clip may be changed using a custom clipper.

How do you use ClipOval in Flutter?

The ClipOval widget encircles or clips the child widget in an oval or circular form. We may change the width and height of the child widget. If the width and height are both the same, the form will be round. The form will be oval if the width and height are not specified.

How do you clip a widget in Flutter?

The widget may be clipped into any desired shape using a custom clipper. It's simple to accomplish in Flutter owing to built-in clippers like ClipOval, ClipRect, ClipRRect, and ClipPath.

Conclusion

In this article, we have extensively discussed the Flutter ClipRect and ClipRRect Widget. We learned ClipRect and ClipRRect Widget, their properties, and how to create them in Flutter. 

We hope that this blog has helped you enhance your knowledge of the flutter framework and if you would like to learn more about flutter, check out our articles at Flutter

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and AlgorithmsCompetitive ProgrammingJavaScriptSystem Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But if you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc., you must look at the problemsinterview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!

Live masterclass