扩展TextFormField时提示onChanged未定义的问题求助

问题场景 #

想要扩展TextFormField组件，为其添加边框和前置提示文本，但将扩展对象从TextField改为TextFormField后，出现onChanged、keyboardType等属性未定义的错误。尝试过重启Dart分析服务、执行flutter clean/flutter pub get，均无法解决。

出错代码 #

extension TextFormFieldExt on TextFormField {
  Widget outside(String text) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: Text(
              text,
              style: const TextStyle(fontSize: 14),
            ),
          ),
          TextFormField(
            initialValue: initialValue,
            onChanged: onChanged, // 错误位置
            keyboardType: keyboardType, // 此处也报错
            decoration: InputDecoration(
              border: const OutlineInputBorder(),
              errorText: decoration?.errorText, // 此处同样报错
            ),
          )
        ],
      ),
    );
  }
}

错误信息 #

Error: The getter 'onChanged' isn't defined for the class 'TextFormField'.
text_field_extensions.dart:19
- 'TextFormField' is from 'package:flutter/src/material/text_form_field.dart' ('../../../Programming/flutter/packages/flutter/lib/src/material/text_form_field.dart').
text_form_field.dart:1
Try correcting the name to the name of an existing getter, or defining a getter or field named 'onChanged'.
            onChanged: onChanged,

问题原因 #

TextFormField是对TextField的封装，它的构造参数会传递给内部的TextField组件，但TextFormField类本身并没有将onChanged、keyboardType、decoration这些参数保存为自身的实例变量或提供对应的getter方法。所以在扩展中直接通过this.onChanged访问这些值时，Dart会提示找不到对应的属性。

解决方案 #

推荐放弃扩展的方式，改用自定义组件的实现思路，这更符合Flutter的组件封装逻辑，也能避免类属性暴露限制带来的问题：

class CustomTextFormField extends StatelessWidget {
  final String labelText;
  final String? initialValue;
  final ValueChanged<String>? onChanged;
  final TextInputType? keyboardType;
  final InputDecoration? decoration;

  const CustomTextFormField({
    super.key,
    required this.labelText,
    this.initialValue,
    this.onChanged,
    this.keyboardType,
    this.decoration,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: Text(
              labelText,
              style: const TextStyle(fontSize: 14),
            ),
          ),
          TextFormField(
            initialValue: initialValue,
            onChanged: onChanged,
            keyboardType: keyboardType,
            // 合并自定义边框与传入的decoration属性
            decoration: decoration?.copyWith(
              border: const OutlineInputBorder(),
            ) ?? const InputDecoration(
              border: OutlineInputBorder(),
            ),
          ),
        ],
      ),
    );
  }
}

使用方式 #

在需要的地方直接调用自定义组件即可：

CustomTextFormField(
  labelText: "用户名",
  onChanged: (value) {
    // 处理输入变化
  },
  keyboardType: TextInputType.text,
)

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