How to create a Spacer style Widget that prints dots?

Question

I'm looking at the Material.io Basil design study, and I'm trying to figure out how to make a Flutter Widget acts like a Spacer, but with content.

Solution

You can combine CustomPainter with TextPainter to fill the available width with a .

Example:

class PointPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final point = TextPainter(
        text: TextSpan(text: ".", style: TextStyle(color: Colors.red)),
        textDirection: TextDirection.ltr);
    point.layout(maxWidth: size.width);

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

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

You'd normally pass the text theme as parameter, but for example purposes let's skip it.

It can then be used within a Row using an Expanded:

Expanded(
  child: CustomPaint(
    painter: PointPainter(),
  ),
),

Comments

[Abdol Hussain Mozaffari]

How to make it center vertically?