Custom painters (CustomPaint) in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the CustomPaint widget in Flutter?

The CustomPaint widget lets you draw graphics directly on the screen by using a CustomPainter. It is used when you want to create custom shapes, designs, or animations beyond standard widgets.

beginner

What method must you override when creating a CustomPainter?

You must override the paint(Canvas canvas, Size size) method. This method contains the drawing instructions using the canvas and the available size.

intermediate

What does the shouldRepaint method do in a CustomPainter?

The shouldRepaint method tells Flutter whether it needs to redraw the painting when the widget updates. Returning true means the painter should repaint, false means no repaint is needed.

beginner

How do you use CustomPaint to add a custom drawing behind a widget?

You wrap the widget inside CustomPaint and provide your CustomPainter to the painter property. The custom drawing appears behind the child widget.

intermediate

Why is it important to keep the paint method efficient in CustomPainter?

Because paint can be called many times during animations or screen updates, slow or complex drawing can cause the app to lag or drop frames. Keeping it efficient ensures smooth performance.

Which method do you override to draw on the canvas in a CustomPainter?

A build(BuildContext context)

B paint(Canvas canvas, Size size)

C draw(Canvas canvas)

D render(Canvas canvas)

The paint(Canvas canvas, Size size) method is where you write your drawing code.

What does the shouldRepaint method control?

A Whether the painter should repaint when the widget updates

B The color of the paint

C The size of the canvas

D The position of the widget

It tells Flutter if the painting needs to be redrawn when the widget changes.

How do you add a custom drawing behind a button widget?

A Use <code>Stack</code> without <code>CustomPaint</code>

B Put the button inside a <code>Container</code>

C Wrap the button with <code>CustomPaint</code> and set the painter

D Use <code>Text</code> widget

Wrapping the button with CustomPaint and providing a painter draws behind the button.

Which object do you use inside paint to draw shapes?

A Widget

B State

C BuildContext

D Canvas

The Canvas object provides methods to draw shapes, lines, and paths.

Why should you avoid heavy computations inside the paint method?

A It can cause slow UI and dropped frames

B It will crash the app immediately

C It changes the widget tree

D It disables animations

Heavy computations slow down drawing and make the app feel laggy.

Explain how CustomPaint and CustomPainter work together to create custom drawings in Flutter.

Think about how the widget uses the painter to draw on the screen.

Describe best practices to keep your custom painting efficient and smooth in a Flutter app.

Consider what happens if painting is slow during animations.

Practice

1. What is the main purpose of a CustomPainter in Flutter?

easy

A. To draw custom graphics directly on the screen

B. To manage app navigation between screens

C. To handle user input events like taps and swipes

D. To create standard UI buttons and text fields

Solution

1. Step 1: Understand CustomPainter role

   A CustomPainter is used to draw graphics directly on the canvas in Flutter apps.

2. Step 2: Compare with other options

   Options A, B, and C relate to standard UI, navigation, and input events, not drawing.

3. Final Answer:

   To draw custom graphics directly on the screen -> Option A

4. Quick Check:

   CustomPainter = Draw graphics [OK]

Hint: CustomPainter is for drawing, not UI controls or navigation [OK]

Common Mistakes:

• Confusing CustomPainter with widget layout
• Thinking it handles user input
• Assuming it manages navigation

2. Which method must you override when creating a CustomPainter subclass to draw on the canvas?

easy

A. paint

B. build

C. createState

D. initState

Solution

1. Step 1: Identify CustomPainter methods

   The paint method is where drawing commands are written.

2. Step 2: Exclude unrelated methods

   build, createState, and initState belong to widgets, not painters.

3. Final Answer:

   paint -> Option A

4. Quick Check:

   Draw in paint() method [OK]

Hint: paint() draws; build() is for widgets [OK]

Common Mistakes:

• Using build() instead of paint()
• Confusing widget lifecycle methods with painter methods
• Forgetting to override paint()

3. What will be the visible result of this Flutter code snippet?

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

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

Widget build(BuildContext context) {
  return CustomPaint(
    size: Size(200, 200),
    painter: MyPainter(),
  );
}

medium

A. A blue square filling the 200x200 area

B. A red circle centered in a 200x200 area

C. Nothing is drawn because shouldRepaint returns false

D. A red circle at the top-left corner

Solution

1. Step 1: Analyze paint method

   The paint method draws a red circle at the center (width/2, height/2) with radius 50.

2. Step 2: Understand shouldRepaint effect

   shouldRepaint returning false means no redraw needed, but initial paint still happens.

3. Final Answer:

   A red circle centered in a 200x200 area -> Option B

4. Quick Check:

   Draw circle center = red circle visible [OK]

Hint: shouldRepaint false still draws initially [OK]

Common Mistakes:

• Thinking shouldRepaint false means no drawing
• Assuming circle is at top-left
• Confusing circle with square shape

4. Identify the error in this CustomPainter subclass:

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

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true
  }
}

medium

A. Canvas cannot draw rectangles

B. paint method should return a value

C. Missing semicolon after return true

D. shouldRepaint must return false

Solution

1. Step 1: Check syntax in shouldRepaint

   The return statement lacks a semicolon after true, causing a syntax error.

2. Step 2: Verify other parts

   paint method correctly draws a rectangle; canvas supports rectangles; shouldRepaint can return true.

3. Final Answer:

   Missing semicolon after return true -> Option C

4. Quick Check:

   Syntax error = missing semicolon [OK]

Hint: Check semicolons after return statements [OK]

Common Mistakes:

• Forgetting semicolon after return
• Thinking paint must return a value
• Assuming canvas can't draw rectangles

5. You want to create a CustomPainter that draws a circle only when the color changes. Which is the best way to implement shouldRepaint to optimize performance?

class CirclePainter extends CustomPainter {
  final Color color;
  CirclePainter(this.color);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color;
    canvas.drawCircle(Offset(size.width/2, size.height/2), 40, paint);
  }

  @override
  bool shouldRepaint(covariant CirclePainter oldDelegate) {
    // What to write here?
  }
}

hard

A. return oldDelegate.color == color;

B. return true;

C. return false;

D. return oldDelegate.color != color;

Solution

1. Step 1: Understand shouldRepaint purpose

   shouldRepaint returns true if the painter needs to redraw due to changes.

2. Step 2: Compare colors to decide repaint

   Repaint only if the new color differs from the old one, so compare oldDelegate.color and color.

3. Step 3: Evaluate options

   return oldDelegate.color != color; returns true when colors differ, optimizing redraw. return true; always repaints (less efficient). return false; never repaints (ignores changes). return oldDelegate.color == color; repaints when colors are same (wrong logic).

4. Final Answer:

   return oldDelegate.color != color; -> Option D

5. Quick Check:

   Repaint if color changed = oldDelegate.color != color [OK]

Hint: Repaint only if properties differ for efficiency [OK]

Common Mistakes:

• Always returning true wastes performance
• Always returning false ignores changes
• Using equality check wrongly in shouldRepaint