ClipRect Widget in Flutter

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<Rect>? 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<MyHomePAGE> { 
    @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:

First initialize the main app as a stateless widget.
Second design the main widget as you desire.
Build the Appbar with in the scaffold widget.
Now use the ClipRect widget inside the body of the scaffold widget and place it in the middle using the center widget.

Align Widget in Flutter

ddeevviissaavviittaa

Improve

Article Tags :

ClipRect Widget in Flutter

Constructor

Properties

Explanation of the above Program:

Similar Reads

Thank You!

What kind of Experience do you want to share?