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?

score 8 · Accepted Answer · answered Oct 23 '19 at 08:04

8

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:

answered Oct 23 '19 at 08:04

CopsOnRoad

237,138
77
654
440

And how can i align center vertically? Image that LinearProgressIndicator have a heigth 30. The text appear in top of bar. I Try 'alignment: Alignment.center' but doesn´t work. – El Hombre Sin Nombre Oct 23 '19 at 15:07
Happy to help, please update your post with the current code you have and I'll be able to assist you better. – CopsOnRoad Oct 23 '19 at 15:30
Cool, I added a separate answer just to keep things simple! – CopsOnRoad Oct 24 '19 at 15:26

score 2 · Answer 2 · answered Oct 23 '19 at 08:02

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'),
              ),
            ),
          ],
        ),

It's better to use `Align` instead of `Positioned` and `Center` — CopsOnRoad, Oct 23 '19 at 08:05

score 1 · Answer 3 · answered Oct 24 '19 at 15:25

Answer to your updated post:

SizedBox(
  height: 50,
  child: Stack(
    children: <Widget>[
      SizedBox.expand(
        child: LinearProgressIndicator(
          value: 0.9,
          backgroundColor: Colors.white,
          valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
        ),
      ),
      Center(child: Text("Timeout of phase communications")),
    ],
  ),
)

Flutter - Text inside LinearProgressIndicator

3 Answers3