Flutter - 如何在两个小部件之间创建一条垂直线

Question

I need to create a vertical line between two widgets like this: https://imgur.com/a/22ybF6o

I could do it but for a fixed size. If this size changes, layout got messy like this: https://imgur.com/a/kO9NXlJ

Here's my code:

Widget listItem(TripsData item) {
    var startDate = DateFormat('dd/MM/yy - HH:mm').format(DateTime.parse(item.start));
    var endDate = DateFormat('dd/MM/yy - HH:mm').format(DateTime.parse(item.end));
    return Card(
      child: Stack(
        children: <Widget>[
          drawDestinationLine(Colors.red),
          Column(
            children: <Widget>[
              ListTile(
                leading: drawDestinationCircle('A', Colors.blue),
                title: Text(startDate),
                subtitle: Text(item.locationStart),
              ),
              const Padding(padding: EdgeInsets.only(bottom: 2.0)),
              ListTile(
                leading: drawDestinationCircle('B', Colors.blue),
                title: Text(endDate),
                subtitle: Text(item.locationEnd),
              ),
            ],
          ),
        ],
      ),
    );
  }

Does someone have a solution to help me with this?

Let me know if need more code, but StackOverflow didn't let me put more code here..

Answer 1

I used the package timelines 0.1.0 which makes this easily possible

Check on pub.dev and the corresponding Github repo for nice examples.

One of the sample use-cases looks like what you are looking for:

Answer 2

In this case you should use the Stack, Positioned, and ConstrainedBox widgets to create the desired arrangement.

Something like this pseudocode, you will need to supply correct coordinates:

Stack ( children: [
   Positioned ( left: 0.0 , top : 0.0 , child:  
     ListTile (leading: drawDestinationCircle('A', Colors.blue),
                title: Text(startDate),
                subtitle: Text(item.locationStart),
              )),
   Positioned ( left: 0.0 , bottom : 0.0 , child:  
     ListTile (leading: drawDestinationCircle('B', Colors.blue),
                  title: Text(endDate),
                  subtitle: Text(item.locationEnd),
                )),
   Positioned ( left 20.0 , top : 20.0 
              , child: ConstrainedBox(
                       constraints: new BoxConstraints(
                              minHeight: 5.0,
                              minWidth: 5.0,
                              maxHeight: 30.0,
                              maxWidth: 5.0,
                              ),
                           child: new DecoratedBox(
                             decoration: new BoxDecoration(color: Colors.red),
                           )
                       ),
              )
          ]);