patterns_canvas 0.5.0

Draw patterns like stripes or dots on canvas elements or widgets.

example/example.md

Cookbook

All the snippets are from the example project.

Simple Usage

Inside your CustomPainter class's paint method, create a Pattern class with background (bgColor) and foreground (fgColor) colors and use one of its paintOn methods:

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
  
    // Prepare a rectangle shape to draw the pattern on.
    final rect = Rect.fromLTWH(80, 50, 200, 100);
    
    // Create a Pattern object of diagonal stripes with the colors we want.
    final Pattern pattern = DiagonalStripesLight(bgColor: Colors.lightGreenAccent, fgColor: Colors.black);
    
    // Paint the pattern on the rectangle. 
    pattern.paintOnRect(canvas, size, rect);
    
  }
}

Pattern constructors and types:

You can construct a Pattern with three different ways:

1. Directly with a Pattern type constructor:

final Pattern p1 = DiagonalStripesLight(bgColor: Colors.yellowAccent, fgColor: Colors.black);

2. With the Pattern.fromValues factory constructor:

final Pattern p2 = Pattern.fromValues(patternType: PatternType.diagonalLight, bgColor: Colors.yellowAccent, fgColor: Colors.black);

3. From a String representation in the form of pattern_backgroundHex_foregroundHex:

final Pattern p3 = Pattern.fromString("diagonalLight_ffff00_000000");

Painting patterns on a Canvas shape:

• Create your Canvas element inside the paint function of your CustomPaint.
• Create a Pattern object with the desired type and colors.
• Use the corresponding paint method to draw the pattern on the object.

// In the build method of your screen:
...
body: Center(
    child: CustomPaint(
      size: const Size(double.infinity, double.infinity),
      painter: MyPainter(),
    ),
  ),
...

// In your CustomPainter:
class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
  
    final rect = Rect.fromLTWH(80, 50, 200, 100);
    DiagonalStripesLight(bgColor: Colors.lightGreenAccent, fgColor: Colors.black).paintOnRect(canvas, size, rect);
    
    final path = Path();
    path.moveTo(120, 200);
    path.lineTo(300, 280);
    path.quadraticBezierTo(20, 400, 40, 300);
    path.close();
    Crosshatch(bgColor: Colors.yellow, fgColor: Colors.black).paintOnPath(canvas, size, path);
    
  }
}

You can use the below methods to draw on Canvas shapes:

pattern.paintOnPath(canvas, size, path);
pattern.paintOnRect(canvas, size, rect);
pattern.paintOnRRect(canvas, size, rRect);
pattern.paintOnCircle(canvas, size, center, radius);

Painting patterns on the whole Canvas:

As above, but you can use the paintOnCanvas method to draw the pattern on the whole Canvas:

TexturePattern(bgColor: Colors.white, fgColor: Colors.blueGrey).paintOnCanvas(canvas, size);

Painting patterns on a Widget:

To draw patterns on a Widget, you need to:

• Wrap the Widget with a CustomPaint:

CustomPaint(
  painter: ContainerPatternPainter(),
  child: Container(
    width: 600,
    height: 200,
    child: Center(
      child: Text("Painting on a Container"),
    ),
  ),
),

• Inside your CustomPainter, create a Pattern and use its paintOnWidget method to paint with it:

class ContainerPatternPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    VerticalStripesThick(bgColor: Color(0xff0509050), fgColor: Color(0xfffdbf6f)).paintOnWidget(canvas, size);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}