ClipRRect and ClipPath in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a rounded rectangle clip with a radius of 10.

Flutter

ClipRRect(
  borderRadius: BorderRadius.circular([1]),
  child: Container(color: Colors.blue, width: 100, height: 100),
)

Drag options to blanks, or click blank then click option'

A10

B20

C5

D15

Attempts:

3 left

💡 Hint

Common Mistakes

Using a very large number makes corners too round.

Forgetting to wrap the child widget.

The BorderRadius.circular method takes a radius value. Here, 10 creates a smooth rounded corner.

2fill in blank

medium

Complete the code to clip a widget with a circular shape using ClipPath.

Flutter

ClipPath(
  clipper: CircleClipper(),
  child: Container(color: Colors.red, width: 100, height: 100),
);

class CircleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path()..addOval(Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: [1]));
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Drag options to blanks, or click blank then click option'

Asize.width

Bsize.width / 4

Csize.height

Dsize.width / 2

Attempts:

3 left

💡 Hint

Common Mistakes

Using the full width or height causes clipping outside the widget.

Using a quarter radius makes the circle too small.

The radius for a circle clip should be half the width to fit perfectly inside the widget.

3fill in blank

hard

Fix the error in the ClipRRect code to properly clip the child widget.

Flutter

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: [1](color: Colors.green, width: 150, height: 150),
)

Drag options to blanks, or click blank then click option'

AContainer

BText

CRow

DColumn

Attempts:

3 left

💡 Hint

Common Mistakes

Using Text without background color.

Using layout widgets without visible background.

The child of ClipRRect should be a widget that can have size and color, like Container. Text or layout widgets alone won't show the clipping effect clearly.

4fill in blank

hard

Fill both blanks to create a ClipPath that clips a triangle shape.

Flutter

ClipPath(
  clipper: [1](),
  child: Container(color: Colors.orange, width: 120, height: 120),
);

class [2] extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(size.width / 2, 0);
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Drag options to blanks, or click blank then click option'

ATriangleClipper

BCircleClipper

CSquareClipper

DOvalClipper

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching class and instance names.

Using a clipper that clips a different shape.

The clipper class and its instance must have the same name. Here, TriangleClipper defines the triangle shape.

5fill in blank

hard

Fill all three blanks to create a ClipRRect with elliptical border radius on top corners only.

Flutter

ClipRRect(
  borderRadius: BorderRadius.only(
    topLeft: Radius.[1](x: 30, y: 50),
    topRight: Radius.[2](x: [3], y: 50),
  ),
  child: Container(color: Colors.purple, width: 200, height: 100),
)

Drag options to blanks, or click blank then click option'

Aelliptical

Bcircular

C40

D50

Attempts:

3 left

💡 Hint

Common Mistakes

Using Radius.circular instead of elliptical.

Using same x values for both corners.

Forgetting to specify y values.

Use Radius.elliptical to create elliptical corners. The x and y values define the ellipse radii. Here, top corners have elliptical radius with x=30 and x=40 respectively.