ClipRect Widget in Flutter (original) (raw)

Last Updated : 28 Feb, 2025

The **ClipRect widget is used to clips its child using a rectangle. It associates with the Clippers family. The main use of clippers is to clip out any portion of the widget as required. It behaves similar to that of _ClipRRect and is used to Clip a Rectangle portion of the child widget but without the rounded corners

Constructor

**ClipRect ClipRect({
Key? key,
CustomClipper? clipper,
Clip clipBehavior = Clip.hardEdge,
Widget? child,
})

Properties

property description
**children The widgets below this widget in the tree
**hashCode The hash code for this object
**key Controls how one widget replaces another widget in the tree
**runtimeType A representation of the runtime type of the object
**clipBehaviour This property takes _Clip Enum as a value and Controls how to clip
**clipper If non-null, determines which clip to use.

**Example:

Here we will clip the below image in our app:

Refer to this article to Display Network Image in Flutter.

**main.dart:

Dart `

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 { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('GeeksforGeeks', style: TextStyle(color: Colors.white), ), backgroundColor: Colors.green, ), body: Center( child: ClipRect( child: Align( alignment: Alignment.topCenter, heightFactor: 0.5, child: Image.network('https://picsum.photos/250?image=9'), ), ) ), backgroundColor: Colors.lightBlue[50], ); } }

`

**Output:

Explanation of the above Program:

  1. First initialize the main app as a stateless widget.
  2. Second design the main widget as you desire.
  3. Build the _Appbar with in the scaffold widget.
  4. Now use the _ClipRect widget inside the body of the scaffold widget and place it in the middle using the center widget.