Flutter - Text inside LinearProgressIndicator

Question

In Flutter i have LinearProgressIndicator. Works but i want to add a text (progression) INSIDE this bar.

I try something like this

SafeArea(
  child: Row(children: <Widget>[
  Center(
    child: Text(DateFormat.ms()
                .format(DateTime.fromMillisecondsSinceEpoch(
                 minuteSecond * 1000))
                 .toString())),
           Expanded(
             child: LinearProgressIndicator(
                     semanticsLabel: (animation.value * 100.0).toStringAsFixed(1).toString(),                
                     semanticsValue:  (animation.value * 100.0).toStringAsFixed(1).toString(),   
                     value: animation.value,
                     backgroundColor: Colors.white,
                     valueColor:
                              AlwaysStoppedAnimation<Color>(Colors.red))),
])),

But obviously this add the text in the same line of the bar, but not inside.

So: Somebody know how can i add the center (centered) inside this bar? Using stack element?

UPDATE

Anybody know how can i align vertically text inside ProgressBar?

Answer 1

You'll have to use Stack, try this:

For simplicity I hardcoded 0.6 value, you can use your animation.value in it.

Stack(
  children: <Widget>[
    SizedBox(
      height: 20,
      child: LinearProgressIndicator(
        value: 0.6,
        backgroundColor: Colors.white,
        valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
      ),
    ),
    Align(child: Text("Text"), alignment: Alignment.topCenter,),
  ],
)

Screenshot:

Answer 2

use it like that, i increased the height of progress indicator cuz text doesnt fit.

       Stack(
          children: <Widget>[
            SizedBox(
              height: 18,
              child: LinearProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
                backgroundColor: Theme.of(context).primaryColorLight,
              ),
            ),
            Positioned(
              child: Center(
                child: Text('Some Text'),
              ),
            ),
          ],
        ),