Custom painters (CustomPaint) in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What does this CustomPainter draw?

Look at the CustomPainter code below. What shape will appear on the screen?

Flutter

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), 50, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

A A blue outlined circle with radius 50

B A blue filled circle centered in the widget with radius 50

C A blue filled square centered in the widget with side 50

D Nothing is drawn because paint method is empty

💡 Hint

Look at the drawCircle method and the paint style used.

The paint object has color blue and style fill, so drawCircle draws a filled blue circle at the center with radius 50.

❓ lifecycle

intermediate

When does shouldRepaint get called?

In a CustomPainter, when is the shouldRepaint method called by Flutter?

A Every time the widget is rebuilt to decide if repaint is needed

B Only once when the app starts

C Never, it is not used by Flutter

D Only when the app is closed

💡 Hint

Think about when Flutter needs to know if it should redraw the custom painting.

Flutter calls shouldRepaint every time the widget rebuilds to check if the painting needs to update.

📝 Syntax

advanced

What error does this CustomPainter code cause?

What error will this CustomPainter code produce when run?

Flutter

class BadPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

A SyntaxError due to missing closing parenthesis in drawRect call

B Runtime error because Rect.fromLTWH is invalid

C TypeError because paint is not initialized

D No error, draws a red rectangle filling the widget

💡 Hint

Check the parentheses in the drawRect line carefully.

The drawRect call is missing a closing parenthesis, causing a syntax error.

❓ navigation

advanced

How to update CustomPaint when data changes?

You have a CustomPainter that draws based on a variable color. How do you make sure the CustomPaint updates when the color changes?

A Use a StatefulWidget but never override shouldRepaint

B Call setState inside the paint method

C Pass the color as a field to the CustomPainter and override shouldRepaint to compare old and new colors

D Recreate the CustomPainter without passing the color

💡 Hint

Think about how Flutter knows when to repaint a CustomPainter.

Passing color and comparing it in shouldRepaint lets Flutter know when to repaint the widget.

🧠 Conceptual

expert

Why use CustomPaint instead of regular widgets?

Which is the best reason to use CustomPaint with a CustomPainter instead of composing regular widgets?

A To make the app run faster by skipping layout

B To reduce app size by avoiding widgets

C To automatically handle user input without extra code

D To draw complex graphics efficiently that are not possible with standard widgets

💡 Hint

Think about what CustomPainter gives you that widgets do not.

CustomPaint allows drawing custom graphics directly on canvas, enabling complex visuals not possible with widgets alone.