DEV Community

Cover image for Flutter skill: using CustomPainter for drawing custom shapes and graphics.
Reme Le Hane
Reme Le Hane

Posted on • Originally published at remejuan.substack.com

Flutter skill: using CustomPainter for drawing custom shapes and graphics.

If you need to create complex shapes, custom visual effects, or even a signature pad, CustomPainter is the way to go. It gives you complete control over drawing on the canvas.

Example: Drawing a Sun with Rays

This example demonstrates how to use CustomPainter to draw a simple sun with rays:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Custom Painter Example")),
        body: Center(
          child: CustomPaint(
            size: Size(300, 300), // Canvas size
            painter: SunPainter(),
          ),
        ),
      ),
    );
  }
}

class SunPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.orange
      ..style = PaintingStyle.fill;

    // Draw the sun (circle)
    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width * 0.2;
    canvas.drawCircle(center, radius, paint);

    // Draw rays
    final rayPaint = Paint()
      ..color = Colors.orangeAccent
      ..strokeWidth = 4;

    for (int i = 0; i < 12; i++) {
      final angle = i * 30.0 * 3.1416 / 180; // Convert to radians
      final startX = center.dx + radius * 1.2 * cos(angle);
      final startY = center.dy + radius * 1.2 * sin(angle);
      final endX = center.dx + radius * 2 * cos(angle);
      final endY = center.dy + radius * 2 * sin(angle);

      canvas.drawLine(Offset(startX, startY), Offset(endX, endY), rayPaint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; // No need to repaint for static drawings
  }
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • CustomPainter: Handles the drawing logic on the canvas.

  • Canvas: The drawing surface where you can draw shapes, lines, text, etc.

  • Paint: Configures color, stroke width, and style (fill or stroke).

  • drawCircle and drawLine: Used to draw the sun and its rays.

Use Cases:

  • Custom progress indicators.

  • Charts or graphs.

  • Signature pads.

  • Game elements.

This method allows for creative freedom and precise control over your Flutter app’s visuals.

Sentry mobile image

Is your mobile app slow? Improve performance with these key strategies.

Improve performance with key strategies like TTID/TTFD & app start analysis.

Read the blog post

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay