带有垂直线和图像的列表图块

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])),
          )
        ]));
  }
}

希望获得帮助。

Answer 2

在这种情况下，正确的小部件是 Stepper https://api.flutter.dev/flutter/material/Stepper-class.html 因此，您可以通过具有许多内置功能的一系列步骤来创建进度。 另外，查看材料样式指南https://material.io/archive/guidelines/components/steppers.html#

也可能很有用