Using Paths and Custom Strokes for Complex Drawings in Flutter

Flutter is a versatile UI toolkit that allows developers to create beautiful and complex user interfaces. One of its strengths lies in its ability to draw custom shapes and designs using paths and strokes. This capability opens up a wide range of possibilities, from simple custom icons to intricate illustrations. In this blog post, we’ll explore how to use paths and custom strokes to create complex drawings in Flutter.

What are Paths and Strokes?

In Flutter’s graphics system:

• Path: A sequence of connected lines and curves that define a shape.
• Stroke: The outline of the shape defined by the path, with properties like color, width, and style (e.g., dashed, dotted).

By manipulating paths and strokes, you can create a vast array of custom drawings.

Why Use Paths and Custom Strokes?

• Customization: Paths allow you to define any shape, while custom strokes enable you to style these shapes in unique ways.
• Performance: Drawing directly using paths can be more efficient than using pre-defined widgets for complex shapes.
• Flexibility: Easily animate or modify paths and strokes for dynamic effects.

How to Draw Complex Drawings in Flutter Using Paths and Custom Strokes

Let’s walk through the process of creating complex drawings in Flutter with paths and custom strokes. We’ll start with the basic setup and move towards more intricate designs.

Step 1: Setting up a Custom Painter

First, you need to create a custom painter that will handle the drawing. This involves extending the CustomPainter class and overriding the paint method.

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Drawing logic will go here
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; // For static drawings, return false for performance.
  }
}

Use this custom painter in a CustomPaint widget:

class MyDrawing extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MyCustomPainter(),
      size: Size(300, 300), // Set the size of your drawing
    );
  }
}

Step 2: Drawing Basic Shapes with Paths

Now, let’s add some drawing logic inside the paint method. We’ll start by drawing a simple rectangle.

@override
void paint(Canvas canvas, Size size) {
  final paint = Paint()
    ..color = Colors.blue
    ..style = PaintingStyle.stroke
    ..strokeWidth = 5.0;

  final path = Path();
  path.addRect(Rect.fromPoints(Offset(50, 50), Offset(250, 250)));

  canvas.drawPath(path, paint);
}

In this example:

• We create a Paint object with a blue stroke color, stroke style, and stroke width.
• We define a rectangle path using path.addRect.
• We draw the path on the canvas using canvas.drawPath.

Step 3: Creating More Complex Paths

To create more complex shapes, you can use methods like moveTo, lineTo, quadraticBezierTo, and cubicTo to define the path’s segments.

@override
void paint(Canvas canvas, Size size) {
  final paint = Paint()
    ..color = Colors.green
    ..style = PaintingStyle.stroke
    ..strokeWidth = 5.0;

  final path = Path();
  path.moveTo(size.width / 2, size.height / 4); // Start point

  // Draw a triangle
  path.lineTo(size.width / 4, 3 * size.height / 4);
  path.lineTo(3 * size.width / 4, 3 * size.height / 4);
  path.close(); // Close the path to form a closed shape

  canvas.drawPath(path, paint);
}

Here, we create a triangle using lines and the close method to connect the last point to the starting point.

Step 4: Applying Custom Strokes

You can customize the appearance of your drawings by modifying the properties of the Paint object. For example, you can use different colors, stroke widths, line caps, and line joins.

@override
void paint(Canvas canvas, Size size) {
  final paint = Paint()
    ..color = Colors.red
    ..style = PaintingStyle.stroke
    ..strokeWidth = 10.0
    ..strokeCap = StrokeCap.round // Round line endings
    ..strokeJoin = StrokeJoin.round; // Round line joins

  final path = Path();
  path.moveTo(50, 50);
  path.lineTo(150, 150);
  path.lineTo(250, 50);

  canvas.drawPath(path, paint);
}

This code draws a red line with rounded caps and joins, giving it a smoother appearance.

Step 5: Creating Dashed Strokes

Flutter doesn’t natively support dashed strokes with a simple property. However, you can implement dashed strokes by drawing multiple short lines with spaces in between.

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class DashedLinePainter extends CustomPainter {
  final double strokeWidth;
  final Color color;
  final double dashLength;
  final double dashGapLength;

  DashedLinePainter({
    this.strokeWidth = 1.0,
    this.color = Colors.black,
    this.dashLength = 10.0,
    this.dashGapLength = 5.0,
  });

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

    final path = Path();
    path.moveTo(0, 0);
    path.lineTo(size.width, 0);

    double start = 0.0;
    while (start < size.width) {
      canvas.drawLine(
        Offset(start, 0),
        Offset(start + dashLength, 0),
        paint,
      );
      start += dashLength + dashGapLength;
    }
  }

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

class DashedLine extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: DashedLinePainter(),
      size: Size(200, 1), // Width and height of the dashed line
    );
  }
}

Usage in a widget:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Dashed Line'),
      ),
      body: Center(
        child: DashedLine(),
      ),
    );
  }
}

Step 6: Drawing Complex Shapes

Here’s an example that draws a simple heart shape using Bézier curves. The heart shape consists of two quadratic Bézier curves and two lines:

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

  final path = Path();
  // Start at the top-middle point of the heart
  path.moveTo(size.width / 2, size.height / 5);

  // Top left curve
  path.quadraticBezierTo(
      0, size.height / 2.5, size.width / 2, size.height * 3 / 5);

  // Top right curve
  path.quadraticBezierTo(
      size.width, size.height / 2.5, size.width / 2, size.height / 5);

  // Complete the shape by drawing two lines
  path.lineTo(size.width / 2, size.height / 5);
  path.close();

  canvas.drawPath(path, paint);
}

Conclusion

Using paths and custom strokes in Flutter allows you to create highly customized and complex drawings. By understanding the fundamentals of path manipulation and paint properties, you can unlock a world of possibilities for creating unique and visually appealing user interfaces. Whether it’s creating custom icons, data visualizations, or intricate illustrations, Flutter’s flexible graphics system provides the tools you need to bring your creative vision to life.