flutter_custom_paint_plus #

Enhanced custom painting with pre-built shapes, patterns, and effects. Supports all 6 platforms with WASM compatibility.

Features #

✨ Pre-built Shapes: Ready-to-use geometric shapes like circles, rectangles, polygons, and stars
🎨 Pattern Generation: Create various patterns including dots, lines, grids, and custom designs
🌟 Visual Effects: Apply shadows, gradients, blur effects, and more
🌐 Cross-platform: Works on all supported Flutter platforms
⚡ WASM Compatible: Optimized for web performance
🚀 High Performance: Optimized rendering engine for smooth animations

Platform Support #

This package supports all 6 Flutter platforms:

✅ iOS - Full support with optimized rendering
✅ Android - Full support with hardware acceleration
✅ Web - WASM compatible with optimized performance
✅ Windows - Native Windows support
✅ macOS - Native macOS support
✅ Linux - Native Linux support

Getting Started #

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_custom_paint_plus: ^0.0.1

Basic Usage #

import 'package:flutter_custom_paint_plus/flutter_custom_paint_plus.dart';

// Use pre-built shapes
CustomPaint(
  painter: CirclePainter(
    radius: 50.0,
    color: Colors.blue,
    strokeWidth: 2.0,
    strokeColor: Colors.black,
  ),
)

// Use patterns
CustomPaint(
  painter: DotsPatternPainter(
    spacing: 20.0,
    dotSize: 5.0,
    color: Colors.red,
  ),
)

// Use effects
CustomPaint(
  painter: ShadowPainter(
    basePainter: CirclePainter(
      radius: 50.0,
      color: Colors.blue,
    ),
    offset: Offset(5, 5),
    blurRadius: 10.0,
    color: Colors.black54,
  ),
)

Available Shapes #

CirclePainter #

Creates circles with customizable radius, color, and stroke properties.

CirclePainter(
  radius: 50.0,
  color: Colors.blue,
  strokeWidth: 2.0,
  strokeColor: Colors.black,
)

RectanglePainter #

Creates rectangles with customizable dimensions, color, and corner radius.

RectanglePainter(
  width: 100.0,
  height: 60.0,
  color: Colors.green,
  cornerRadius: 10.0,
  strokeWidth: 1.0,
  strokeColor: Colors.darkGreen,
)

PolygonPainter #

Creates regular polygons with customizable sides, radius, and rotation.

PolygonPainter(
  sides: 6, // Hexagon
  radius: 50.0,
  color: Colors.orange,
  rotation: 0.5, // radians
)

StarPainter #

Creates stars with customizable points, outer/inner radius, and rotation.

StarPainter(
  points: 5, // 5-pointed star
  outerRadius: 50.0,
  innerRadius: 25.0,
  color: Colors.yellow,
)

Available Patterns #

DotsPatternPainter #

Creates repeating patterns of dots with customizable spacing and size.

DotsPatternPainter(
  spacing: 20.0,
  dotSize: 5.0,
  color: Colors.red,
  repeatPattern: true,
)

LinesPatternPainter #

Creates repeating patterns of lines with customizable spacing and orientation.

LinesPatternPainter(
  spacing: 15.0,
  lineThickness: 2.0,
  color: Colors.blue,
  isHorizontal: true, // or false for vertical
)

GridPatternPainter #

Creates grid patterns with customizable spacing and line thickness.

GridPatternPainter(
  spacing: 25.0,
  lineThickness: 1.0,
  color: Colors.grey,
)

Available Effects #

ShadowPainter #

Applies shadow effects to any base painter.

ShadowPainter(
  basePainter: CirclePainter(
    radius: 50.0,
    color: Colors.blue,
  ),
  offset: Offset(5, 5),
  blurRadius: 10.0,
  color: Colors.black54,
)

GradientPainter #

Applies gradient effects to any base painter.

GradientPainter(
  basePainter: RectanglePainter(
    width: 100.0,
    height: 60.0,
    color: Colors.blue,
  ),
  colors: [Colors.blue, Colors.purple, Colors.red],
  gradientType: GradientType.linear,
)

BlurPainter #

Applies blur effects to any base painter.

BlurPainter(
  basePainter: CirclePainter(
    radius: 50.0,
    color: Colors.blue,
  ),
  blurRadius: 5.0,
  blurStyle: BlurStyle.normal,
)

Utility Functions #

PaintUtils #

Helper functions for creating paint objects with common configurations.

final paint = PaintUtils.createPaint(
  color: Colors.blue,
  style: PaintingStyle.fill,
  strokeWidth: 2.0,
);

final gradientPaint = PaintUtils.createGradientPaint(
  gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),
  bounds: Rect.fromLTWH(0, 0, 100, 100),
);

ColorUtils #

Helper functions for color manipulation and color scheme generation.

final complementary = ColorUtils.complementary(Colors.blue);
final triadic = ColorUtils.triadic(Colors.blue);
final monochromatic = ColorUtils.monochromatic(Colors.blue, 5);

GeometryUtils #

Helper functions for geometric calculations.

final distance = GeometryUtils.distance(point1, point2);
final angle = GeometryUtils.angleDegrees(point1, point2);
final polygon = GeometryUtils.createPolygon(6, 50.0, center);

Advanced Usage #

Combining Multiple Effects #

CustomPaint(
  painter: ShadowPainter(
    basePainter: GradientPainter(
      basePainter: BlurPainter(
        basePainter: CirclePainter(
          radius: 50.0,
          color: Colors.blue,
        ),
        blurRadius: 3.0,
      ),
      colors: [Colors.blue, Colors.purple],
      gradientType: GradientType.radial,
    ),
    offset: Offset(5, 5),
    blurRadius: 10.0,
    color: Colors.black54,
  ),
)

Custom Pattern Creation #

class CustomPatternPainter extends PatternPainter {
  const CustomPatternPainter({
    required this.spacing,
    required this.elementSize,
    required this.color,
  });

  @override
  final double spacing;
  
  @override
  final double elementSize;
  
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    // Custom pattern logic here
    for (double x = 0; x < size.width; x += spacing) {
      for (double y = 0; y < size.height; y += spacing) {
        // Draw custom elements
        canvas.drawRect(
          Rect.fromLTWH(x, y, elementSize, elementSize),
          paint,
        );
      }
    }
  }
}

Performance Considerations #

Static Painters: Use const constructors when possible for better performance
Repaint Optimization: Override shouldRepaint to control when repainting occurs
Canvas Operations: Minimize canvas state changes and use efficient drawing methods
WASM Optimization: The package is optimized for web performance with WASM support

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Support #

If you encounter any issues or have questions, please:

Check the documentation
Search existing issues
Create a new issue

Changelog #

See CHANGELOG.md for a list of changes and version history.

flutter_custom_paint_plus 0.0.1 flutter_custom_paint_plus: ^0.0.1 copied to clipboard

Metadata