Flutter构建DiamondWidget时抛出StackOverflowError问题求助

原始代码 #

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: DiamondWidget(2),
      ),
    );
  }
}

class DiamondWidget extends StatelessWidget {
  DiamondWidget(int counter, /*Image logo */);
  
  int get counter => this.counter;

  @override
  Widget build(BuildContext context) {
    return Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(child: Text('$counter', style: TextStyle(color: Colors.white),)), // Widget 1
          //Image(image: ) // Widget 2
        ]
      );
  }
}

运行错误信息 #

构建DiamondWidget(dirty)时抛出以下StackOverflowError：
Stack Overflow
相关的错误触发组件是
DiamondWidget
main.dart:39
抛出异常时的调用栈如下：

问题原因 #

1. 无限递归调用：DiamondWidget中counter的getter写法错误，int get counter => this.counter;会无限触发自身调用，每次访问counter都会递归调用getter，直到栈内存耗尽引发StackOverflowError。
2. 成员变量未初始化：构造函数的counter参数没有赋值给类的成员变量，导致无有效数据可访问。

修复方案 #

修正构造函数与成员变量定义，移除错误的递归getter：

class DiamondWidget extends StatelessWidget {
  // 定义final成员变量，通过构造函数初始化
  final int counter;
  // 可选logo参数改为可选命名参数，符合Flutter规范
  const DiamondWidget(this.counter, {this.logo});
  final Image? logo;

  @override
  Widget build(BuildContext context) {
    return Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('$counter', style: const TextStyle(color: Colors.white)),
          // logo不为空时显示
          if (logo != null) logo!,
        ]
      );
  }
}

关键修改点 #

• 添加final int counter成员变量，通过构造函数this.counter直接初始化参数
• 移除无限递归的getter，直接使用成员变量即可访问值
• 将注释的logo参数改为可选命名参数，优化API设计
• 移除Row中的Expanded（原代码中mainAxisSize: MainAxisSize.min与Expanded冲突，会引发布局警告）

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