Open In App

ClipRect Widget in Flutter

Improve
Improve
Like Article
Like
Save
Share
Report

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

Constructors:

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

Properties:

  • 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: Controls how to clip
  • clipper: If non-null, determines which clip to use.

Example:

Here we will clip the below image in our app:

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'),
        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],
    );
  }
}
  
class MyClip extends CustomClipper<Rect> {
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 100, 100);
  }
  
  bool shouldReclip(oldClipper) {
    return false;
  }
}


Output:

Explanation:

  1. First initialize the main app as a stateless widget.
  2. Second design the main widget as you desire.
  3. Build the Appbar with 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.


Last Updated : 02 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads