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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

📊 A side-by-side product comparison between Sentry and Crashlytics

A free guide pointing out the differences between Sentry and Crashlytics, that’s it. See which is best for your mobile crash reporting needs.

See Comparison