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
}
}
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.
Top comments (0)