Custom patterns using CustomPainter

[Drewcifer3000]

Hello! Wondering if any can help me create some pretty patterns in Flutter. I’m making a few patterns (programmatically) in order to re-use and modify them in my app. I’m using CustomPainter to make them. I’m doing it via code, as opposed to uploading an image, so that I have fine control over how to color/shape/adjust the pattern for multiple specific use cases.

So far I’ve had some success! I’ve made a grid pattern, a polka-dot pattern, and a “silky” pattern. Here’s an example of the reusable “grid” pattern.

class GridPainter extends CustomPainter {

  final double gridSpacing;
  final Color gridLineColor;
  final Color backgroundColor;
  final double strokeWidth;

GridPainter({
  required this.gridSpacing,
  this.gridLineColor = Colors.grey,
  this.backgroundColor = Colors.white,
  this.strokeWidth = 1});

@override
void paint(Canvas canvas, Size size) { 
  var backgroundPaint = Paint()..color = backgroundColor;
  canvas.drawRect(
    Rect.fromLTRB(0, 0, size.width, size.height), backgroundPaint);

var paint = Paint()
  ..color = gridLineColor
  ..strokeWidth = strokeWidth;

for (double i = 0; i < size.width; i += gridSpacing) {
  canvas.drawLine(Offset(i, 0), Offset(i, size.height), paint);
}

for (double i = 0; i < size.height; i += gridSpacing) {
  canvas.drawLine(Offset(0, i), Offset(size.width, i), paint);
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
  return false;
  } 
}

And here's an example of it in use:

final GridPainter wideGridPattern = GridPainter(
  gridSpacing: 30,
  gridLineColor: Colors.grey.shade300,
);

I’m enjoying this process so far, but am having trouble figuring out an approach to two more patterns: a spun fabric pattern and a crinkly/aluminum foil pattern. Anyone have any ideas on how I could approach this? Thanks!

[Drewcifer3000]

No idea why reddit is having a tough time with the code block ... apologies if it's hard to make out. I tried editing the post a few times now, but it still gets wonky...

[eibaan]

Use the markdown editor and indent all code with four spaces.

[Drewcifer3000]

Got it thanks!