Flutter: Avoid Text Widget re-centering when Timer is active

Issue

I have this flutter app with a Scaffold in which i have put the following container.
This container contains the timer’s minute and seconds, and two buttons.
I am trying to avoid the Text widget to re-centers when Timer is active. This seems to happens because the Text widget changes size when a different digit is showed.

I tried to wrap the Text widget with an Expanded widget, but it didn’t solve the issue. How can i solve this?

Container(
                      height: size.height * 0.40,
                      width: size.width * 0.80,
                      decoration: BoxDecoration(
                          color: Color(0xFFf4f6fa),
                          borderRadius: BorderRadius.circular(29.5)),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Expanded(
                                child: Text(
                                  "${f.format(_minutes)}:${f.format(_seconds)}",
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    fontSize: 80,
                                    color: Color(0xff7165E3),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              // STOP BUTTON
 
                              Container(
                                decoration: BoxDecoration(
                                  color: Colors.grey[800],
                                  shape: BoxShape.circle,
                                ),
                                height: 90,
                                width: 90,
                                child: ElevatedButton(
                                  style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        Colors.grey[800]),
                                    shape: MaterialStateProperty.all(
                                        CircleBorder()),
                                  ),
                                  onPressed: () {
                                    setState(() {
                                      _stopTimer();
                                    });
                                  },
                                  child: Container(
                                    alignment: Alignment.center,
                                    child: Text(
                                      "Annulla",
                                      style: TextStyle(
                                        fontSize: 14,
                                        fontWeight: FontWeight.bold,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
 
                              // START BUTTON 
 
                              Container(
                                decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                ),
                                height: 90,
                                width: 90,
                                child: ElevatedButton(
                                  style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        Color(0xff7165E3)),
                                    shape: MaterialStateProperty.all(
                                        CircleBorder()),
                                  ),
                                  onPressed: () {
                                    _startTimer();
                                  },
                                  child: Container(
                                    alignment: Alignment.center,
                                    child: Text(
                                      "Avvia",
                                      style: TextStyle(
                                        fontSize: 14,
                                        fontWeight: FontWeight.bold,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),

Solution

This happens because of the font you are using.

enter image description here

The font you use dose not have negative space. Try to use some font with negative space adjusted. I Roboto Mono is a font that have negative space.

enter image description here

In the above pic the characters take equal space.

pubspec.yaml

google_fonts: ^2.1.0

sport_screen.dart

Text(
  "${f.format(_minutes)}:${f.format(_seconds)}",
  textAlign: TextAlign.center,
  style: GoogleFonts.robotoMono(
    fontSize: 80.0,
    color: const Color(0xff7165E3),
  ),
)

refer here for more about fonts and negative space.

Default Font

enter image description here

Monospace Font

enter image description here

Answered By – Vettiyanakan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published