Cliprect Widget

Introduction of ClipRect Widget

In Flutter, the ClipRect widget is used to clip its child to a rectangular shape. It constrains the child widget’s painting to a specified rectangular region. This widget is part of the clipping widgets in Flutter, allowing developers to control the visible area of child widgets.

Below is a brief explanation of the ClipRect widget with some key properties:

child: The widget to be clipped. This widget will apply the clipping effect to this child widget.

ClipRect(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
),

clipBehavior: Determines how the child should be clipped. The default is Clip.antiAlias, which uses anti-aliased clipping. Other options include Clip. none (no clipping) and Clip.hardEdge (non-antialiased clipping).

ClipRect(
  clipBehavior: Clip.hardEdge,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
),

clipper: An optional custom clipper that allows developers to define a custom shape for clipping. This can be useful for more complex clipping scenarios.

ClipRect(
  clipper: MyCustomClipper(),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
),

clip oval: ClipOval is a shorthand for creating a clipped oval shape. It’s often used in combination with ClipRect to create circular clipping effects.

ClipOval(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
),

Final Code: This is the final code with the combination of some above Cliprect widget properties.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        clipBehavior: Clip.hardEdge,
        child: Container(
          width: 300,
          height: 300,
          color: Colors.blue,
        ),
      ),
    );
  }
}

This widget is beneficial when you want to control the visible area of a child widget, especially in cases where you want to apply custom clipping behaviors. It’s a versatile tool for creating visually interesting and precisely shaped UI elements in Flutter.

Thank for visiting Hybrid App Development
Posted by Hussam HM