Custom painters (CustomPaint) in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a CustomPaint widget with a painter.

Flutter

CustomPaint(
  size: Size(100, 100),
  painter: [1](),
)

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

AText

BContainer

CMyPainter

DScaffold

Attempts:

3 left

💡 Hint

Common Mistakes

Using widgets like Container or Text as painter.

Forgetting to create a CustomPainter subclass.

The painter property requires a class that extends CustomPainter, like MyPainter.

2fill in blank

medium

Complete the paint method signature inside a CustomPainter subclass.

Flutter

@override
void paint([1] canvas, Size size) {
  // drawing code
}

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

ACanvas

BPaint

CBuildContext

DWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Using Paint instead of Canvas as parameter.

Confusing BuildContext with Canvas.

The paint method receives a Canvas object to draw on.

3fill in blank

hard

Fix the error in the shouldRepaint method to always repaint.

Flutter

@override
bool shouldRepaint([1] oldDelegate) {
  return true;
}

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

ACustomPainter

BWidget

CPaint

DBuildContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong parameter type like Widget or Paint.

Omitting the parameter.

The shouldRepaint method receives the old CustomPainter to compare.

4fill in blank

hard

Fill both blanks to draw a red circle at the center of the canvas.

Flutter

void paint(Canvas canvas, Size size) {
  final paint = Paint()..color = [1];
  canvas.drawCircle(size.center(Offset.zero), [2], paint);
}

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

AColors.red

B50.0

CColors.blue

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong color like blue.

Using integer 100 instead of double 50.0 for radius.

Use Colors.red for the paint color and 50.0 as the circle radius.

5fill in blank

hard

Fill all three blanks to create a CustomPainter that draws a green rectangle.

Flutter

class [1] extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = [2];
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), [3]);
  }

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

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

AGreenRectPainter

BColors.green

Cpaint

DRedRectPainter

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong class name unrelated to green rectangle.

Passing wrong color or variable to drawRect.

The class name is GreenRectPainter, color is Colors.green, and the paint object is passed to drawRect.