如何在 Flutter 中的图标之间绘制垂直连接线？

Question

我有 3 个 ListTile 小部件，如下所示，我想在图标之间添加垂直连接线，但不知道该怎么做。有人可以帮忙吗？谢谢。

[Icon]   Order received
  |      2020-05-28 10:00 AM
  |
  |
[Icon]   On the way
  |      2020-05-29 10:00 AM
  |
  |
[Icon]   Delivered
         2020--05-29 11:00 AM

编辑：下面提供源代码。如上所述，我需要在 ListTile 小部件的图标之间画一条线。尝试了 VerticalDivider，但 ListTile 小部件之间仍然存在很大差距。

    import 'package:flutter/material.dart';
    import 'package:font_awesome_flutter/font_awesome_flutter.dart';
    import 'package:home_chefs/common_widgets/text_widget.dart';
    import 'package:home_chefs/constants/color_palette.dart';
    import 'package:home_chefs/constants/font_enum.dart';
    import 'package:home_chefs/constants/form_styleguides.dart';

    class OrderStatusWidget extends StatefulWidget {
      @override
      _OrderStatusWidgetState createState() => _OrderStatusWidgetState();
    }

    class _OrderStatusWidgetState extends State<OrderStatusWidget> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: ColorPalette.white,
          body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                padding: EdgeInsets.only(top: 30.0, bottom: 30.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    TextWidget(
                      text: 'Order status',
                      fontFamily: FontFamily.BalooRegular.toShortString(),
                      fontSize: FormStyleGuides.textSizeMedium,
                    ),
                    TextWidget(
                      text: 'Invoice: 12828',
                      fontFamily: FontFamily.BalooRegular.toShortString(),
                      fontSize: FormStyleGuides.textSizeMedium,
                    ),
                    Container(
                        height: 100.0,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(8.0)),
                            image: DecorationImage(
                                fit: BoxFit.contain,
                                image: AssetImage(
                                  'assets/images/trending/pho_ha_noi.jpg',
                                ))))
                  ],
                ),
              ),
              Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    ListTile(
                      leading: FaIcon(
                        FontAwesomeIcons.book,
                        color: ColorPalette.persimmon,
                      ),
                      title: Text('Order received'),
                      subtitle: Text('30/05/2020 10.00 AM'),
                      //contentPadding: EdgeInsets.only(left: 20.0, bottom: 30.0),
                    ),
                    ListTile(
                      leading: FaIcon(
                        FontAwesomeIcons.truck,
                        color: ColorPalette.persimmon,
                      ),
                      title: Text('On the way'),
                      subtitle: Text('30/05/2020 10.00 AM'),
                      //contentPadding: EdgeInsets.only(left: 20.0, bottom: 30.0),
                    ),
                    ListTile(
                      leading: FaIcon(
                        FontAwesomeIcons.solidFlag,
                        color: ColorPalette.persimmon,
                      ),
                      title: Text('Delivered'),
                      subtitle: Text('30/05/2020 11.00 AM'),
                      //contentPadding: EdgeInsets.only(left: 20.0, bottom: 30.0),
                    ),
                  ],
                ),
              ),
              Container(
                width: 100.0,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    RaisedButton(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(
                              FormStyleGuides.buttonBorderRadius),
                          side: BorderSide(color: ColorPalette.persimmon)),
                      color: ColorPalette.persimmon,
                      highlightColor: ColorPalette.persimmon,
                      onPressed: () {},
                      padding: EdgeInsets.fromLTRB(
                          FormStyleGuides.buttonPaddingLeft,
                          FormStyleGuides.buttonPaddingTop,
                          FormStyleGuides.buttonPaddingRight,
                          FormStyleGuides.buttonPaddingBottom),
                      child: TextWidget(
                        text: 'Confirm delivery',
                        color: ColorPalette.white,
                        fontSize: FormStyleGuides.textFormFieldLabelSize,
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        );
      }
    }

Answer 1

如果我正确理解了您的问题，您正在寻找这样的东西：

class IconLines62088774 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ItemContainer(),
        ItemContainer(),
        ItemContainer(),
      ],
    );
  }
}

class ItemContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                color: Colors.blue,
                height: 20,
                width: 1,
              ),
              Icon(Icons.message, color: Colors.grey,),
              Container(
                color: Colors.blue,
                height: 20,
                width: 1,
              ),
            ],
          ),
          Expanded(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('On the way'),
                  Text('01-07-2020'),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}