Flutter命名路由传参异常 BMI计算器结果页空值调用错误排查

问题排查与修复方案 #

1. 「null tried to call >=25.0」报错原因 #

该错误是因为调用getWeightStatus()、getDiagnostic()方法时，BmiBrain类的私有属性_bmi还未完成初始化。_bmi默认值为null，只有调用bmiCalculator()方法后才会被赋值，调用顺序错误就会触发空值调用异常。
同时需要注意：如果你的height参数单位是厘米，直接用pow(height,2)计算会导致BMI值完全异常，需要先把厘米转换为米再计算。

2. 「null tried to call toUpperCase()」报错原因 #

该错误是路由传参逻辑错误导致的：你直接将Result页面实例塞到了arguments参数里，目标页面没有正确接收到bmi、weightStatus、diagnostic三个参数，三个变量都是空值，调用toUpperCase时就触发了空值报错。

具体修复步骤 #

步骤1：优化BmiBrain类，规避空值风险 #

import 'dart:math';

class BmiBrain{
  final int weight;
  final int height;
  late double _bmi;
  // 构造函数加required避免空参数传入，同时直接完成BMI计算
  BmiBrain({required this.height, required this.weight}){
    // 身高单位是厘米的话，先除以100转成米再计算
    _bmi = weight / pow(height / 100, 2);
  }
  String bmiCalculator(){
    return _bmi.toStringAsFixed(1);
  }
  String getWeightStatus(){
    if(_bmi >= 25.0){
      return "OVERWEIGHT";
    } else if (_bmi > 18.5){
      return "NORMAL";
    } else {
      return "UNDERWEIGHT";
    }
  }
  String getDiagnostic(){
    if(_bmi >= 25.0){
      return "你的体重偏高，建议适当控制饮食增加运动";
    } else if (_bmi > 18.5){
      return "你的体重处于正常范围，很棒";
    } else {
      return "你的体重偏轻，建议适当补充营养";
    }
  }
}

步骤2：修正路由传参逻辑 #

不要直接传页面实例，仅传递需要的业务数据：

onPress: (){
  BmiBrain bmi = BmiBrain(height: height, weight: weight);
  Navigator.pushNamed(context, "/result", arguments: {
    "bmi": bmi.bmiCalculator(),
    "weightStatus": bmi.getWeightStatus(),
    "diagnostic": bmi.getDiagnostic()
  });
}

步骤3：Result页面正确接收参数 #

在页面build方法中先获取路由传递的参数：

@override
Widget build(BuildContext context) {
  // 接收路由参数
  final Map args = ModalRoute.of(context)!.settings.arguments as Map;
  final String bmi = args["bmi"];
  final String weightStatus = args["weightStatus"];
  final String diagnostic = args["diagnostic"];
  
  // 原有页面渲染逻辑不变
  return Scaffold(
    // 你的原有代码
    body: Column(
      children: [
        Container(
          child: Center(child: Text(
            weightStatus.toUpperCase(),
            style: weightStatusStyle,
          )),
        ),
        Container(
          child: Center(child: Text(
            bmi,
            style: kHeavyFont.copyWith(fontSize: 80.0),
          )),
        ),
        Container(
          margin: const EdgeInsets.only(right: 10.0, left: 10.0),
          child: Center(
              child: Text(
                diagnostic,
                style: kLabelText,
                textAlign: TextAlign.center,
              )),
        )
      ],
    )
  );
}

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