I can't center more than one widget in stack

Question

I want to use stack for some reason and all my widgets should be centered. It's ok when I use one positioned and one align. However using second align widget does not place under the first text.

Widget _body() {
  return Stack(
    children: <Widget>[
      Positioned(
        left: 0,
        child: Text("Text here"),
      ),
      Align(
        child: Text(
          "First Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
      Align(
        child: Text(
          "Second Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
    ],
  );
}

I want to reach this enter image description here

Answer 1

Widget _buildBody() {
  return Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Align(
        alignment: Alignment(0, -0.95),
        child: Image.asset('assets/images/profile.jpg', width: 200, height: 200, fit: BoxFit.cover,),
      ),
      Align(
        alignment: Alignment(0, -0.35),
        child: Text("Centered Text"),
      ),
      Align(
        alignment: Alignment(0, -0.1),
        child: Text("Second centered text"),
      ),
      Align(
        alignment: Alignment(0, 0.1),
        child: CircularProgressIndicator(),
      )
    ],
  );
}

Answer 2

如果您想和Align一起使用，这就是您所需要的。

Widget _body() {
  return Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Positioned(
        top: 0,
        left: 0,
        child: Text("Text here"),
      ),
      Align(
        child: Text(
          "Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
      Align(
        alignment: Alignment(0.0, 0.1), // change this value to place it below the 1st centered widget
        child: Text(
          "Second Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
    ],
  );
}