Flutter开发中如何将Calculate类的sum值传递到CircularProg类使用

问题原因 #

你触发的空指针错误是两个问题共同导致的：

1. Sum类下的静态变量sum没有设置初始值，首次访问时默认是null
2. 你在_CalculateState中修改的是当前类的实例变量sum，并没有同步赋值给静态变量Sum.sum，导致Sum.sum始终是初始空值

快速修复方案 #

步骤1：给静态变量设置初始值 #

修改Sum类代码，给所有静态变量赋默认初始值0：

class Sum {
  static int babi = 0;
  static int chld = 0;
  static int sum = 0;
}

步骤2：同步更新静态变量 #

修改onAddButtonPressed方法，本地变量更新后同步赋值给Sum类的静态变量，同时调用setState刷新UI：

void onAddButtonPressed() {
  int value = int.parse(age);
  sum += value ;
  babi += baby;
  chld += child;
  // 同步更新到静态变量
  Sum.sum = sum;
  Sum.babi = babi;
  Sum.chld = chld;
  // 刷新UI
  setState((){});
  print('sum: $sum');
  print('babi: $babi');
  print('chld: $chld');
}

步骤3：优化CircularProg取值逻辑 #

给取值增加空兼容处理，同时适配CircularProgressIndicator要求的double类型参数：

child: CircularProgressIndicator.adaptive(
  backgroundColor: Colors.grey,
  value: Sum.sum == null ? 0.0 : (Sum.sum / 100) * totalValue,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
),

更规范的实现方案（推荐） #

Flutter不推荐用静态变量做跨组件状态共享，维护成本高且容易出现值不同步问题：

• 如果CircularProg是Calculate的子组件，直接将sum作为构造参数传递即可：

// 改造CircularProg接收参数
class CircularProg extends StatelessWidget {
  final int sum;
  final int totalValue;
  const CircularProg({
    Key? key,
    required this.sum,
    this.totalValue = 1200
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: CircularProgressIndicator.adaptive(
        backgroundColor: Colors.grey,
        value: (sum / 100) * totalValue,
        valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
      ),
    );
  }
}

// 在Calculate中调用时传入当前sum值
CircularProg(sum: sum)

• 如果两个组件不在同一组件树层级，可使用Provider、GetX等轻量状态管理框架共享sum的值。

内容的提问来源于stack exchange，提问作者MD Mosfiqur Rohim Masfiq