Flutter组件未渲染，底部RenderFlex溢出无限像素错误求助

问题根源 #

1. 嵌套Scaffold导致布局冲突：首页Scaffold的body中嵌套了Pomodoro组件的Scaffold，外层Column无法正确约束内层Scaffold的高度，引发无限空间溢出。
2. 固定尺寸适配失效：CircularPercentIndicator使用固定radius:250.0，在小屏幕设备上会超出可视区域，加剧布局问题。

解决方案 #

步骤1：修改Pomodoro组件，移除嵌套Scaffold

Pomodoro作为首页子组件，无需独立Scaffold，直接返回带渐变的Container即可：

@override
Widget build(BuildContext context) {
  return Container(
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        colors: [Color(0xff1542bf), Color(0xff51a8ff)],
        begin: FractionalOffset(0.5, 1),
      ),
    ),
    width: double.infinity,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const Padding(
          padding: EdgeInsets.all(12.0),
          child: Text(
            "Pomodoro",
            style: TextStyle(
              color: Colors.white,
              fontSize: 30.0,
            ),
          ),
        ),
        const SizedBox(height: 20.0),
        // 用Expanded+AspectRatio+动态radius实现多屏幕适配
        Expanded(
          child: AspectRatio(
            aspectRatio: 1, // 保持圆形比例
            child: CircularPercentIndicator(
              radius: MediaQuery.of(context).size.width * 0.4, // 半径设为屏幕宽度的40%
              percent: percent,
              animation: true,
              animateFromLastPercent: true,
              lineWidth: 20.0,
              progressColor: Colors.white,
              backgroundWidth: 50.0,
              center: Text(
                "$timeInMinute",
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 80.0,
                ),
              ),
            ),
          ),
        ),
        const SizedBox(height: 20.0),
      ],
    ),
  );
}

步骤2：简化首页布局层级

首页body无需额外的Material和Column，直接将Pomodoro作为body子组件，利用Scaffold自动约束高度：

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      appBar: AppBar(
        title: const Text("Let's get productive!"),
      ),
      // 直接绑定Pomodoro，Scaffold会自动分配剩余屏幕空间
      body: Pomodoro(),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.analytics),
            label: 'Analytics',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
    ),
  );
}

关键说明 #

• 移除嵌套Scaffold后，外层Scaffold会自动为Pomodoro提供正确的高度约束（屏幕高度减去AppBar和底部导航栏的高度），彻底解决Infinity溢出问题。
• 动态设置圆形指示器半径+AspectRatio，确保在不同尺寸屏幕上都能完整显示，无需滚动。

内容的提问来源于stack exchange，提问作者Rachita Dongre