Лист списка с вертикальной линией и изображением

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

Надеюсь, эта помощь.