Placing text in the center of a CircularProgressIndicator

Question

I'm trying to place a text countdown timer in the center of a CircularProgressIndicator. This is the code for the layout of the body:

return new Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Stack(
      children: <Widget>[
        Container(
          width: 200,
          height: 200,
          child: new CircularProgressIndicator(
            strokeWidth: 15,
            value: value,
          ),
        ),
        Align(
          alignment: FractionalOffset.center,
          child: Text("Test")
        )
      ],
    ),
    ...
  ],
);

Adding the Align() widget changes the layout from this:

to this:

I've also tried

Align(
  alignment: Alignment.center,
  child: Text("Test")
)

and

Center(
  child: Text("Test"),
)

instead of the Align() widget, but they all produce the same result

Answer 1

That's because your Stack doesn't have size, in order to fix your issue, wrap your Stack inside SizedBox, set a height, and Center the Text.

Column(
  children: <Widget>[
    SizedBox(
      height: 200.0,
      child: Stack(
        children: <Widget>[
          Center(
            child: Container(
              width: 200,
              height: 200,
              child: new CircularProgressIndicator(
                strokeWidth: 15,
                value: 1.0,
              ),
            ),
          ),
          Center(child: Text("Test")),
        ],
      ),
    ),
  ],
)