Flutter解决NoSuchMethodError并实现构造函数获取控制器的Getter

显示的错误： #

NoSuchMethodError: 在null上调用了getter 'text'。
接收者：null
尝试调用：text

问题描述： #

如何创建从构造函数获取各控制器值的Getter，以便在TextFormField中调用？

原代码： #

import 'package:flutter/material.dart';
class CustomTextFieldForm extends StatefulWidget {
  final TextEditingController controller;
  final String hintText;
  final String errorMessage;

  const CustomTextFieldForm({
    Key? key,
    required this.controller,
    required this.hintText,
    required this.errorMessage,
    required Null Function(dynamic text) onChanged,
  }) : super(key: key);
  @override
  _CustomTextFieldFormState createState() => _CustomTextFieldFormState();
}

class _CustomTextFieldFormState extends State<CustomTextFieldForm> {
  get controller => null;

  get errorMessage => null;

  get hintText => null;

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      validator: (String? value) {
        if (value!.isEmpty) {
          return errorMessage;
        }
        return null;
      },
      decoration: InputDecoration(
          hintText: hintText,
          hintStyle: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w200,
          ),
          errorStyle: TextStyle(height: 0),
          suffixIcon: controller.text.length > 0 ? IconButton(
              onPressed: () {
                controller.clear();
                setState(() {});
              },
              icon: Icon(Icons.cancel, color: Colors.grey))
              : null
      ),
    );
  }
}

问题原因 #

State类里定义的controller、errorMessage、hintText三个Getter都直接返回null，调用controller.text时触发空指针错误。实际上State类可直接通过widget.xxx访问StatefulWidget中的成员变量，无需重新定义返回null的Getter。

修复方案 #

删除State类中错误的Getter定义，直接用widget.xxx访问对应值；同时补充使用原构造函数中未用到的onChanged参数，优化空断言逻辑提升安全性。

修复后的代码： #

import 'package:flutter/material.dart';
class CustomTextFieldForm extends StatefulWidget {
  final TextEditingController controller;
  final String hintText;
  final String errorMessage;
  final void Function(String text) onChanged; // 修正参数类型，避免dynamic

  const CustomTextFieldForm({
    Key? key,
    required this.controller,
    required this.hintText,
    required this.errorMessage,
    required this.onChanged,
  }) : super(key: key);
  
  @override
  _CustomTextFieldFormState createState() => _CustomTextFieldFormState();
}

class _CustomTextFieldFormState extends State<CustomTextFieldForm> {
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: widget.controller,
      onChanged: widget.onChanged,
      validator: (String? value) {
        if (value?.isEmpty ?? true) { // 替换强制空断言，更安全
          return widget.errorMessage;
        }
        return null;
      },
      decoration: InputDecoration(
          hintText: widget.hintText,
          hintStyle: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w200,
          ),
          errorStyle: const TextStyle(height: 0),
          suffixIcon: widget.controller.text.isNotEmpty ? IconButton(
              onPressed: () {
                widget.controller.clear();
                setState(() {});
              },
              icon: const Icon(Icons.cancel, color: Colors.grey))
              : null
      ),
    );
  }
}

可选优化：自定义Getter简化代码 #

如果不想每次都写widget.前缀，可以定义正确的Getter，返回widget中的对应值：

class _CustomTextFieldFormState extends State<CustomTextFieldForm> {
  TextEditingController get controller => widget.controller;
  String get errorMessage => widget.errorMessage;
  String get hintText => widget.hintText;

  @override
  Widget build(BuildContext context) {
    // 此处可直接使用controller、errorMessage、hintText
    return TextFormField(
      controller: controller,
      // ... 其余代码与修复版一致
    );
  }
}

内容的提问来源于stack exchange，提问作者Elly John Mirasol