# 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:

```javascript
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
  }
}
```

## **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.