ClipRRect and ClipPath in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visual output of this ClipRRect widget?

Consider this Flutter widget code snippet:

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

What will the blue container look like on screen?

Flutter

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

A A blue circle with diameter 100 pixels.

B A blue square with rounded corners of radius 20 pixels, 100x100 pixels.

C A blue square with sharp corners, 100x100 pixels.

D A blue rectangle with no color visible.

💡 Hint

ClipRRect clips its child with rounded corners defined by borderRadius.

ClipRRect applies a rounded rectangle clip to its child. Here, the Container is clipped to have corners rounded by 20 pixels radius, so the blue box appears with rounded corners.

❓ ui_behavior

intermediate

What shape does this ClipPath create?

Given this Flutter code:

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

class TriangleClipper extends CustomClipper {
  @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 oldClipper) => false;
}

What shape will the red container be clipped into?

Flutter

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

class TriangleClipper 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;
}

A A red square with sharp corners.

B A red circle with diameter 100 pixels.

C A red triangle pointing upwards.

D A red rectangle with rounded corners.

💡 Hint

The custom clipper defines a path with three points forming a triangle.

The TriangleClipper creates a path shaped like a triangle with the top point at the center top and the base along the bottom edge. The ClipPath clips the container to this triangle shape.

❓ lifecycle

advanced

When does Flutter call shouldReclip in a CustomClipper?

In a CustomClipper used with ClipPath, when is the method shouldReclip called by Flutter?

A Never, it is only a placeholder method.

B Every frame during animations regardless of changes.

C Only once when the widget is first built.

D When the clipper instance changes to decide if the clip needs updating.

💡 Hint

Think about when Flutter needs to know if it should redraw the clip shape.

Flutter calls shouldReclip when the clipper instance changes to check if the clipping path needs to be recalculated and the widget redrawn.

📝 Syntax

advanced

Which ClipRRect code snippet correctly applies a circular border radius?

Choose the correct Flutter code to clip a widget with a circular border radius of 50 pixels.

A ClipRRect(borderRadius: BorderRadius.circular(50.0), child: widget)

B ClipRRect(borderRadius: BorderRadius.circular('50'), child: widget)

C ClipRRect(borderRadius: BorderRadius.all(Radius.circular(50)), child: widget)

D ClipRRect(borderRadius: BorderRadius.circular(50), child: widget)

💡 Hint

The radius value must be a double, not a string.

BorderRadius.circular expects a double value. Option A passes a string which causes a type error. Options A and B are both valid, but B explicitly uses a double literal. Option A is also valid but more verbose. Option A is the best choice.

🔧 Debug

expert

Why does this ClipPath not clip the child widget as expected?

This Flutter code uses ClipPath with a custom clipper but the child widget is not clipped:

ClipPath(
  clipper: MyClipper(),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.green,
  ),
)

class MyClipper extends CustomClipper {
  @override
  Path getClip(Size size) {
    return Path();
  }

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

What is the reason the clipping does not happen?

Flutter

ClipPath(
  clipper: MyClipper(),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.green,
  ),
)

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path();
  }

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

A The getClip method returns an empty Path, so no clipping area is defined.

B ClipPath requires a borderRadius property to clip.

C The Container has no size, so clipping is ignored.

D The shouldReclip method returns false, preventing clipping.

💡 Hint

Check what the getClip method returns as the clipping shape.

An empty Path means no area is defined for clipping, so the child is not clipped at all. The shouldReclip returning false only affects updates, not initial clipping. Container has size and ClipPath does not use borderRadius.