Custom painters (CustomPaint) in Flutter - Mini App: Build & Ship

Build: Custom Paint Circle Screen

This screen shows a custom painted circle in the center using CustomPaint widget.

Target UI

┌───────────────────────────────┐
│           AppBar              │
│  Custom Painted Circle Below  │
│                               │
│           (  ●  )             │
│                               │
│                               │
└───────────────────────────────┘

Use CustomPaint widget to draw a blue circle.

Circle should be centered and have radius 50.

Use a CustomPainter subclass to draw the circle.

Screen should have an AppBar with title 'Custom Painter Demo'.

Starter Code

Flutter

import 'package:flutter/material.dart';

class CustomPaintCircleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Painter Demo'),
      ),
      body: Center(
        child: CustomPaint(
          size: Size(100, 100),
          painter: CirclePainter(), // TODO: Implement CirclePainter
        ),
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: Draw a blue circle with radius 50 at center
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class CustomPaintCircleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Painter Demo'),
      ),
      body: Center(
        child: CustomPaint(
          size: Size(100, 100),
          painter: CirclePainter(),
        ),
      ),
    );
  }
}

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

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

We created a CirclePainter class extending CustomPainter. Inside the paint method, we made a Paint object with blue color and fill style. Then we calculated the center of the canvas using the size parameter. Finally, we drew a circle with radius 50 at the center using canvas.drawCircle. The shouldRepaint returns false because the painting does not change dynamically.

The CustomPaint widget uses this painter and sets its size to 100x100, so the circle fits nicely in the center of the screen.

Final Result

Completed Screen

┌───────────────────────────────┐
│           AppBar              │
│  Custom Painted Circle Below  │
│                               │
│           (  ●  )             │
│                               │
│                               │
└───────────────────────────────┘

User sees a blue circle centered on the screen below the AppBar.

No interactive elements on this screen.

Stretch Goal

Add a slider below the circle to change the circle's radius dynamically.

💡 Hint

Use a StatefulWidget and update the radius in setState when slider value changes, then call setState to repaint.