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.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay