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

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

CodePudding user response：

This happens because of the font you are using.

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.

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

Monospace Font