Flutter 中跨多列画线

Question

我想在 flutter 中画这样的东西，并且我希望它是动态的，因为付款可能超过 3。

此外，为了确保付款、到期日和指标保持一致，我考虑将这三个元素放在一列中，并将三列放在一行中。现在我被卡住了，我不知道如何使线穿过三个点而不超出边并具有动态宽度。

这就是我从现在起所做的：

Stack(
  children: [
    Positioned(
      bottom: 5, 
      left: 0,
      right: 0,
      child: Container(
        height: 2, 
        color: AppColors.uiGrayscale500, 
      ),
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        ...[0,1,2,3].map(
          (payment) {
            return Column(
              children: [
                Text(
                  'due date'
                ),
                Text(
                  'amount'
                ),
                    Container(
                      width: 12,
                      height: 12,
                      margin: const EdgeInsets.only(top: 8),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4),
                        color: Colors.red
                      ),
                )
              ],
            );
          },
        ),
      ],
    ),
  ],
),

有人可以帮助我吗？

Answer 1

这个包可能会帮助你实现你想要的：https://pub.dev/packages/timelines