Flutter中GestureDetector的onTap()内如何正确实例化类对象？

问题场景 #

跟着课程制作Flutter BMI计算器时，在GestureDetector的onTap()方法中声明CalculateBmi类对象时触发报错：Undefined named 'cal'。相关代码如下：

InputPage问题代码 #

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'card_page.dart';
import 'constants.dart';
import 'result.dart';
import 'dart:math';
import 'bmi_calculator.dart';

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

  @override
  State<InputPage> createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  // 假设此处已定义height_value和weight_value变量
  double height_value = 170;
  int weight_value = 65;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 省略其他代码...
        GestureDetector(
          onTap: () => {
            // 此处触发报错
            CalculateBmi cal=CalculateBmi(height: height_value.toInt(),weight: weight_value),
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => resultpage(
                  bmiresult: cal.calculate()
                  bmitext: cal.getResult()
                  bmilongtext:cal.getComment()
                ),
              ),
            ),
          },
          child: Container(
            height: 80.0,
            margin: EdgeInsets.only(top: 10.0),
            width: double.infinity,
            color: Colors.pink,
            child: Center(
              child: Text(
                'CALCULATE YOUR BMI',
                style: TextStyle(color: Colors.white, fontSize: 19.0),
              ),
            ),
          ),
        ),
      ],
    );
  } 
}

CalculateBmi类代码 #

import 'dart:math';
import 'package:flutter/cupertino.dart';

class CalculateBmi {
  CalculateBmi({required this.height, required this.weight});
  final int height;
  final int weight;

  double ? _bmi;

  // 方法名拼写错误
  String? calulate() {
    _bmi = weight / pow(height / 100, 2);
    return _bmi?.toStringAsFixed(1);
  }

  String getResult() {
    // 未处理_bmi为null的情况
    if (_bmi>= 25) {
      return 'Overweight';
    } else if (_bmi >= 18.5) {
      return 'Normal';
    } else {
      return 'Underweight';
    }
  }

  String getComment() {
    // 未处理_bmi为null的情况
    if (_bmi >= 25) {
      return 'You have higher than normal weight\nPlease excercie more often.';
    } else if (_bmi >= 18.5) {
      return 'Awesome! You have a healthy body. Stay happy.';
    } else {
      return 'You have lower than normal weight\nPlease eat well.';
    }
  }
}

报错原因 #

1. 箭头函数的集合字面量误解：onTap: () => { ... }中，大括号会被Dart解析为Map集合字面量，而非代码块。所以CalculateBmi cal=...会被当成试图创建一个键为CalculateBmi、值为cal=...的Map，导致cal被识别为未定义的命名参数，触发报错。
2. 次要问题：
   • CalculateBmi类中计算BMI的方法名拼写错误：calulate → 正确应为calculate
   • resultpage构造函数的参数之间缺少逗号，违反Dart语法
   • getResult和getComment方法未处理_bmi为null的情况，会触发空安全警告

修复方案 #

1. 修正onTap的函数写法 #

把箭头函数改成普通代码块（去掉=>，使用() { ... }），同时给构造参数添加逗号：

GestureDetector(
  onTap: () {  // 替换箭头函数为普通代码块
    CalculateBmi cal = CalculateBmi(height: height_value.toInt(), weight: weight_value);
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => resultpage(
          bmiresult: cal.calculate(),  // 添加逗号
          bmitext: cal.getResult(),    // 添加逗号
          bmilongtext: cal.getComment()
        ),
      ),
    );
  },
  // 省略容器代码...
)

2. 修正CalculateBmi类的方法名和空安全问题 #

import 'dart:math';
import 'package:flutter/cupertino.dart';

class CalculateBmi {
  CalculateBmi({required this.height, required this.weight});
  final int height;
  final int weight;

  double? _bmi;

  // 修正方法名拼写错误
  String? calculate() {
    _bmi = weight / pow(height / 100, 2);
    return _bmi?.toStringAsFixed(1);
  }

  // 添加空判断，避免空安全报错
  String getResult() {
    if (_bmi == null) return '无效数据';
    if (_bmi! >= 25) {
      return '超重';
    } else if (_bmi! >= 18.5) {
      return '正常';
    } else {
      return '偏瘦';
    }
  }

  // 添加空判断，避免空安全报错，并替换为中文提示
  String getComment() {
    if (_bmi == null) return '请先计算BMI值';
    if (_bmi! >= 25) {
      return '你的体重高于正常范围，请多运动。';
    } else if (_bmi! >= 18.5) {
      return '很棒！你的体重处于健康范围，请继续保持。';
    } else {
      return '你的体重低于正常范围，请注意补充营养。';
    }
  }
}

验证修复 #

完成以上修改后：

• onTap方法中可以正常创建CalculateBmi对象并调用其方法
• 空安全警告消除
• BMI计算和结果展示功能正常运行

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