Как выровнять элементы стека по центру и растянуть по горизонтали?

Question

Доброе утро. Я пытаюсь создать этот экран. Две проблемы с этим:

1) Я не могу растянуть зеленую горизонтальную линию на всю ширину. Это мой код, более или менее:

Scaffold(
  Stack(
    Center(
      Column(
      ...
      ),
    ),
    Align(
      alignment: Alignment.center,
      child: Image(
        image: AssetImage('assets/load_line.png'),
        fit: BoxFit.fitWidth,
      ),
    ),

И это - это то, что мне дает мой код. Кажется, где-то есть отступы или отступы, но я не могу их найти.

2) Как вы можете видеть на моем первом скриншоте, мне нужно, чтобы логотип и горизонтальная линия располагались один над другим, но они явно не совпадают. Я думал использовать одно изображение, но боюсь, что растяжение разрушит его. Что я могу сделать, чтобы достичь этого результата?

Спасибо всем.

Answer 1

Вы можете попробовать это так.

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.green,
    appBar: AppBar(title: Text("Title")),
    body: Stack(
      children: <Widget>[
        Align(child: Image.asset("assets/images/profile.jpg")),
        Align(child: Container(height: 1, color: Colors.black12)),
        Align(
          alignment: Alignment(0.0, 0.2),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text("Your first text here!"),
              Text("Your second text here"),
              Text("Your third text here!"),
            ],
          ),
        )
      ],
    ),
  );
}

Выход