Flutter UI中莫名出现黑块问题求助

针对你遇到的文本后方黑块问题，结合你提供的代码，给你几个具体的排查和解决步骤：

1. 排查字体渲染异常 #

你在RichText中使用了Popins字体，这是最可能的诱因：

• 先临时移除fontFamily: 'Popins'配置，使用系统默认字体运行项目，观察黑块是否消失。如果消失，说明是字体加载或渲染问题。
• 检查pubspec.yaml中的字体配置是否正确，确认字体文件路径无误，并且执行过flutter pub get同步资源。

2. 移除冗余的空Container #

Stack底部的空Container写法容易引发布局异常：

// 删除这段冗余代码
Align(
  alignment: Alignment.bottomCenter,
  child: Container(height: 20),
),

若需要调整中间文本区域的位置，直接给Column添加padding: EdgeInsets.only(bottom: 20)，或者调整mainAxisAlignment参数，这种方式更安全。

3. 检查第三方组件绘制问题 #

MultiCircularSlider作为第三方组件，可能存在绘制边界的bug：

• 暂时注释掉该组件，仅保留中间的文本内容，看黑块是否仍然出现。如果消失，说明是该组件的问题，可以尝试更新组件版本，或者调整progressBarWidth、trackWidth的数值测试。

4. 添加透明背景兜底 #

如果以上方法都无效，给RichText的文本样式添加透明背景，避免意外的背景渲染：

RichText(
  text: TextSpan(
    style: TextStyle(
      fontSize: 16,
      color: Colors.black,
      fontFamily: 'Popins',
      backgroundColor: Colors.transparent, // 新增透明背景
    ),
    children: [
      // ... 原有TextSpan内容
    ],
  ),
),

你提供的原始代码： #

@override
Widget build(BuildContext context) {
  double progressPercentage = (_nutriPoints / _dailyGoal).clamp(0.0, 1.0);
  Color progressColor = Color(0xFF1731B8); // New color #1731B8

  return SizedBox(
    width: widget.size ?? MediaQuery.of(context).size.width * 0.8,
    height: widget.size ?? MediaQuery.of(context).size.width * 0.8,
    child: _errorMessage.isNotEmpty
        ? Center(
            child: Text(
              _errorMessage,
              style: TextStyle(color: Colors.red),
            ),
          )
        : Stack(
            alignment: Alignment.center,
            children: [
              MultiCircularSlider(
                size: widget.size ?? MediaQuery.of(context).size.width * 0.8,
                progressBarType: MultiCircularSliderType.circular,
                values: [progressPercentage],
                colors: [progressColor],
                showTotalPercentage: false,
                animationDuration: const Duration(milliseconds: 1000),
                animationCurve: Curves.easeInOutCirc,
                trackColor: progressColor.withOpacity(0.1),
                progressBarWidth: 20.0,
                trackWidth: 20.0,
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    '${_nutriPoints.toInt()}',
                    style: TextStyle(
                      fontSize: 28,
                      fontWeight: FontWeight.bold,
                      color: progressColor,
                    ),
                  ),
                  SizedBox(height: 5), // Add a small space between the number and text
                  RichText(
                    text: TextSpan(
                      style: TextStyle(
                        fontSize: 16,
                        color: Colors.black,
                        fontFamily: 'Popins',
                      ),
                      children: [
                        TextSpan(
                          text: 'NUTRI',
                          style: TextStyle(
                            fontWeight: FontWeight.normal,
                            letterSpacing: 3,
                          ),
                        ),
                        TextSpan(
                          text: 'POINTS',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            letterSpacing: 3,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              // This empty container pushes the content up
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(height: 20),
              ),
            ],
          ),
  );
}
}

内容的提问来源于stack exchange，提问作者Dakshil Kanakia