Flutter中如何将flutter_otp_text_field值保存到GetX控制器

问题根源 #

你当前的赋值方向完全搞反了：code = controller.otp; 是把控制器里的空值覆盖了输入的OTP内容，正确的做法应该是把输入的code赋值给控制器的otp变量。

修复步骤 #

1. 修正OTP组件的onCodeChanged回调

将原来的赋值语句调换方向：

OtpTextField(
  numberOfFields: 6,
  borderColor: Color.fromRGBO(189, 189, 189, 1),
  borderRadius: BorderRadius.circular(12),
  showFieldAsBox: true,
  borderWidth: 4.0,
  onCodeChanged: (String code) {
    print(code);
    // 正确赋值：把输入的code保存到控制器的otp变量
    controller.otp = code;
  },
  onSubmit: (String verificationCode) {
    // 可选：在用户完成输入后再次赋值，确保最终完整OTP被保存
    controller.otp = verificationCode;
  },
),

2. （可选）让OTP变量支持响应式更新

如果需要UI能实时跟随OTP输入变化，建议把控制器里的otp改成GetX的响应式变量：

// 控制器里的变量定义替换为
RxString otp = ''.obs;
// 赋值时需要操作.value属性
controller.otp.value = code;
// UI中可以用Obx包裹相关组件实现实时更新
Obx(() => Text('当前OTP：${controller.otp.value}'));

3. 验证API提交逻辑

修改后，调用funVerivikasiEmail时，控制器的otp变量就会携带用户输入的内容，你可以通过打印日志确认值是否正确传递。

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