Как создать виджет в стиле Spacer, который печатает точки?

Question

Я смотрю на Material.io Исследование дизайна Basil и пытаюсь выяснить, как заставить виджет Flutter работать как Spacer, но с содержанием.

Answer 1

Вы можете объединить CustomPainter с TextPainter, чтобы заполнить доступную ширину .

Пример:

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;
  }
}

Обычно текстовая тема передается в качестве параметра, но для примера давайте пропустим ее.

Затем ее можно использовать в Row, используя Expanded:

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