如何实现垂直显示分钟和秒的计时器小部件

Question

我想在flutter中实现上述风格。

到目前为止我所实施的：

为什么文本之间有不必要的空格。

我做了一些调试：

怎么可以。我从两个文本中删除了垂直填充。

我的代码：

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

时钟样式：

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

Answer 1

渲染的文本根据其大小添加额外的垂直空间，称为“前导”。将字体高度设置为1即可将其删除：

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