Flutter 基于时间轴的颤振设计

我试图画这幅画，但我在努力

我不明白如何使白色的信息块充满活力。也就是说，它会自动适应所包含元素的高度大小

我现在必须给出一个定义的高度（这里是200），我希望尺寸是自动的。此外，如果我没有给出一个定义的大小，我左边的灰线就会消失

设计：

---

我觉得这个包裹容易多了

---

我觉得这个包裹容易多了

---

你可以试试这个包的时间表

此软件包还自动调整小部件的高度和宽度

为了下次自动调整小部件的大小，您可以在代码中的大多数位置使用

扩展的
小部件

注意：扩展的小部件必须是
行
、
列
或
Flex
的后代，因此请小心使用。
您可以尝试使用此软件包查看时间表

此软件包还自动调整小部件的高度和宽度

为了下次自动调整小部件的大小，您可以在代码中的大多数位置使用
扩展的
小部件

注意：扩展的小部件必须是
行
、
列
或
Flex
的后代，因此请小心使用。

ListTile(
  title : Column(
    children: [
      Container(
        width: double.infinity,
        child: Row(
          children: [
            Container(
              width: 50,
              alignment: Alignment.center,
              child: Container(
                width: 20,
                height: 20,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(40),
                    border: Border.all(
                        width: 5,
                        color: Colors.blue,
                        style: BorderStyle.solid
                    )
                ),
              ),
            ),
            Text('9:00 am - 9:15 am')
          ],
        )
      ),
      Container(
        child: IntrinsicHeight(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                width : 50,
                alignment: Alignment.center,
                child: IntrinsicHeight(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        color: Colors.grey,
                        width: 3,
                        height : 200 // if I remove the size it desappear
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.symmetric(vertical :10),
                  padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                  color: Colors.white,
                  child: Column(
                    children: [
                      Text('Titre'),
                      Text('Info 1'),
                      Text('Info 2')
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      )
    ],
  ),
),

TimelineTileBuilder.connected(
            connectionDirection: ConnectionDirection.before,
            itemCount: processes.length,
            contentsBuilder: (_, index) {
              //your Container/Card Content
            },
            indicatorBuilder: (_, index) {
              if (processes[index].isCompleted) {
                return DotIndicator(
                  color: Color(0xff66c97f),
                  child: Icon(
                    Icons.check,
                    color: Colors.white,
                    size: 12.0,
                  ),
                );
              } else {
                return OutlinedDotIndicator(
                  borderWidth: 2.5,
                );
              }
            },
            connectorBuilder: (_, index, ___) => SolidLineConnector(
              color: processes[index].isCompleted ? Color(0xff66c97f) : null,
            ),
          ),
        ),