How to implement a Timer widget where minutes and seconds are vertically displayed

Question

I want to achive the above style in flutter.

What I have implemented so far:

Why is there unnecessary space between the texts.

I have done some debugging:

How can. I remove the vertical padding from the both texts.

My Code:

return SizedBox(
      height: 300,
      width: 300,
      child: CircleProgressBar(
        foregroundColor: Colors.blue,
        backgroundColor: Colors.black12,
        value: 0.0,
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "30",
                style: clockStyle,
              ),
              Align(
                child: Text(
                  "26",
                  style: clockStyle,
                ),
              ),
            ],
          ),
        ),
      ),
    );

Clock Style:

TextStyle clockStyle = GoogleFonts.alfaSlabOne(
  fontSize: 100,
);

Answer 1

The rendered text is adding extra vertical space based on its size, known as leading. Set the font height to 1 to remove it:

TextStyle clockStyle = GoogleFonts.alfaSlabOne(
  fontSize: 100,
  height: 1,
);