Flutter 自定义形状上的动态数据

我想建立一个应用程序，其中我的设计之一，我想填充动态数据的形状。这些将是自定义的形状，我有两个不同的形状，他们交替一个低于另一个。我有一个左边的形状，然后下一个是右边的形状，依此类推。是否有可能在颤振中创建此项，我将如何做

---

这里有一种方法。我已经使用使用

CustomPainter

创建的自定义三角形形状简化了形状，因此您必须根据需要对其进行修改

ListView(
      children: <Widget>[
        OverflowTitle(color: Colors.green),
        OverflowTitle(color: Colors.blue),
        OverflowTitle(color: Colors.red)
      ],
    );

这是输出

如果你需要更多的帮助，请告诉我

更新 这是我定制的三角形画师

import 'package:flutter/material.dart';

enum Direction { Up, Down, Left, Right }

class TrianglePainter extends CustomPainter {
  final Color strokeColor;
  final Direction direction;

  TrianglePainter({this.strokeColor = Colors.white, this.direction});

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

    canvas.drawPath(getTrianglePath(size.width, size.height), paint);
  }

  Path getTrianglePath(double x, double y) {
    if (direction == Direction.Right) {
      return Path()
        ..moveTo(0, y)
        ..lineTo(x, y / 2)
        ..lineTo(0, 0)
        ..lineTo(0, y);
    } else if (direction == Direction.Left) {
      return Path()
        ..moveTo(x, 0)
        ..lineTo(0, y / 2)
        ..lineTo(x, y)
        ..lineTo(x, 0);
    } else if (direction == Direction.Down) {
      return Path()
        ..moveTo(0, 0)
        ..lineTo(x / 2, y)
        ..lineTo(x, 0)
        ..lineTo(0, 0);
    } else {
      return Path()
        ..moveTo(0, y)
        ..lineTo(x / 2, 0)
        ..lineTo(x, y)
        ..lineTo(0, y);
    }
  }

  @override
  bool shouldRepaint(TrianglePainter oldDelegate) {
    return oldDelegate.strokeColor != strokeColor;
  }
}

---

你能为你想做的事情添加一张图片或一个简短的剪辑吗？@JosteveAdekanbi我刚刚用截图更新了我的问题，覆盖图重要吗？@JosteveAdekanbi我更喜欢与overlay@JosteveAdekanbi谢谢，我认为这是不可能的。检查更新的答案。。我已经添加了我的自定义三角形绘制类。。您必须将其修改为您的形状

import 'package:flutter/material.dart';

enum Direction { Up, Down, Left, Right }

class TrianglePainter extends CustomPainter {
  final Color strokeColor;
  final Direction direction;

  TrianglePainter({this.strokeColor = Colors.white, this.direction});

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

    canvas.drawPath(getTrianglePath(size.width, size.height), paint);
  }

  Path getTrianglePath(double x, double y) {
    if (direction == Direction.Right) {
      return Path()
        ..moveTo(0, y)
        ..lineTo(x, y / 2)
        ..lineTo(0, 0)
        ..lineTo(0, y);
    } else if (direction == Direction.Left) {
      return Path()
        ..moveTo(x, 0)
        ..lineTo(0, y / 2)
        ..lineTo(x, y)
        ..lineTo(x, 0);
    } else if (direction == Direction.Down) {
      return Path()
        ..moveTo(0, 0)
        ..lineTo(x / 2, y)
        ..lineTo(x, 0)
        ..lineTo(0, 0);
    } else {
      return Path()
        ..moveTo(0, y)
        ..lineTo(x / 2, 0)
        ..lineTo(x, y)
        ..lineTo(0, y);
    }
  }

  @override
  bool shouldRepaint(TrianglePainter oldDelegate) {
    return oldDelegate.strokeColor != strokeColor;
  }
}