列出具有垂直线和图像的图块

Question

我试图在列表图块的开头创建一个带有图像和垂直线的列表视图。我会尝试用图像来解释。

我已经尝试使用带有容器的堆栈作为垂直线，然后是图像，但它不起作用。我也尝试将Position.fill添加到垂直线，这也没有用。

          Row(
            children: <Widget>[
              Stack(
                children: <Widget>[
                  new Image(image: new AssetImage("assets/img/airplane.png")),
                  Positioned.fill(
                    child: Container(
                      height: 1.0,
                      width: 3.0,
                      color: Colors.green,
                      margin: const EdgeInsets.only(left: 30.0, right: 10.0),
                    ),
                  ),
                ],
              )
            ],
          ),

这就是我想要实现的目标。

商店中的应用程序的一个示例，它正在实现我想要实现的目标：

Answer 1

这是一个例子：

class MainPageState extends State<MainPage> {
  //State must have "build" => return Widget
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Stack(alignment: const Alignment(0.0, 0.0), children: <Widget>[
          Container(
            //Do you need to make Image as "Circle"
            child: Image.asset('images/sanBernardo1.jpg',
                width: 150.0, height: 150.0, fit: BoxFit.fill),
          ),
          Positioned(
            left: 50.0,
            child: Container(
                width: 12.0,
                height: 100.0,
                padding: const EdgeInsets.all(5.0),
                decoration: BoxDecoration(color: Colors.red[400])),
          )
        ]));
  }
}

希望这有帮助。