Flutter运行报maximum call stack size exceeded错误求解决方案

问题根因 #

你遇到的栈溢出错误核心来自两处代码问题：

• home_screen.dart中product getter的无限递归调用
• Body组件中不合理的内边距配置

具体解决步骤 #

1. 修复HomeScreen的product属性问题 #

你写的get product => this.product逻辑是：当调用product属性时，返回this.product会再次触发这个getter本身，形成死循环，直接导致栈溢出。
修改后的完整home_screen.dart代码如下：

import 'package:flutter/material.dart';
import './components/body.dart';
import '../model/product.dart';

class HomeScreen extends StatelessWidget {
  // 定义接收product的存储属性，替换递归getter
  final Product product;
  // 补充构造方法，接收外部传入的product参数
  const HomeScreen({super.key, required this.product});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildAppBar(),
      body: buildBody(),
    );
  }

  AppBar buildAppBar() {
    return AppBar(
      backgroundColor: Colors.white,
      elevation: 0,
      leading: IconButton(icon: Icon(Icons.arrow_back, color: Colors.black), onPressed: () {}),
      actions: <Widget>[
        IconButton(icon: Icon(Icons.search, color: Colors.black), onPressed: () {}),
        IconButton(icon: Icon(Icons.shopping_cart, color: Colors.black), onPressed: () {}),
      ],
    );
  }

  Body buildBody() {
    return Body(product: this.product);
  }
}

注意：跳转进入HomeScreen的页面需要传入对应的Product实例，否则会触发参数缺失报错。

2. 修复Body组件的错误内边距 #

你在Body的Container中写了padding: EdgeInsets.only(top: size.height * 12, ...)，size.height是当前设备的屏幕高度，乘以12后相当于12倍屏幕高度的顶部内边距，会导致所有子组件完全超出可视区域，修改为合理数值即可：

// 原错误代码
padding: EdgeInsets.only(top: size.height * 12, left: kDefaultPadding, right: kDefaultPadding),
// 修改后示例，可根据UI需求调整系数，不要超过1
padding: EdgeInsets.only(top: size.height * 0.12, left: kDefaultPadding, right: kDefaultPadding),

修复验证 #

以上两处修改完成后重新运行项目，栈溢出错误会直接消失，Body组件的内容也会正常显示在可视区域内。

内容的提问来源于stack exchange，提问作者puthumai nathan