Flutter中如何向API发送含国家码与加号的完整手机号

问题核心在于你当前仅通过TextEditingController.text获取用户输入的本地号码，而带加号和国家码的完整号码存储在InternationalPhoneNumberInput的onInputChanged回调返回的PhoneNumber对象的phoneNumber字段中。只需修改以下三处代码即可解决：

1. 更新GetX控制器，新增完整号码存储变量 #

在OtpController中添加一个响应式变量，专门存储带国家码的完整手机号：

class OtpController extends GetxController {
  final TextEditingController controller = TextEditingController();
  var loading = false.obs;
  var fullPhoneNumber = ''.obs; // 新增：存储带国家码的完整号码

  Future<void> submitPhone(BuildContext context) async {
    try {
      loading.value = true;
      print(fullPhoneNumber.value); // 改为打印完整号码
      var headers = {'Content-Type': 'application/json'};

      var url = Uri.parse(
          ApiEndpoints.baseUrl + ApiEndpoints.authEndpoints.checkPhone);
      Map body = {
        'Phone': fullPhoneNumber.value, // 提交完整号码
      };

      http.Response response =
          await http.post(url, body: jsonEncode(body), headers: headers);
      final json = jsonDecode(response.body);
      print(json);
      if (response.statusCode == 200) {
        if (json['success'] == true) {
          // 此处添加成功后的逻辑
        } else {
          throw json['message'] ?? 'Something went wrong';
        }
      } else {
        throw 'Request failed with status: ${response.statusCode}';
      }
    } catch (e) {
      CustomToast.show(
        e.toString(),
        context,
        backgroundColor: kErrorText,
        textStyle: const TextStyle(color: Colors.white),
      );
    } finally {
      loading.value = false;
    }
  }
}

2. 修改CustomPhoneInput组件，添加完整号码回调 #

给CustomPhoneInput新增一个回调参数，用于将组件内部生成的完整号码传递给外部控制器：

class CustomPhoneInput extends StatelessWidget {
  final TextEditingController controller;
  final String label;
  final Function(PhoneNumber)? onPhoneChanged; // 新增：完整号码回调

  const CustomPhoneInput({
    super.key,
    required this.controller,
    required this.label,
    this.onPhoneChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: Dimensions.sizeLarge),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
          color: kBorder,
          width: 2.0,
        ),
        borderRadius: BorderRadius.circular(Dimensions.sizeMiniSmall),
      ),
      child: InternationalPhoneNumberInput(
        onInputChanged: (PhoneNumber number) {
          print(number.phoneNumber);
          onPhoneChanged?.call(number); // 触发回调，传递完整号码
        },
        // 其余原有代码保持不变...
      ),
    );
  }
}

3. 在父Widget中绑定回调，同步完整号码到控制器 #

使用CustomPhoneInput时，通过回调把完整号码赋值给控制器的fullPhoneNumber变量：

CustomPhoneInput(
  controller: otpController.controller,
  label: "Phone Number",
  onPhoneChanged: (PhoneNumber number) {
    otpController.fullPhoneNumber.value = number.phoneNumber ?? '';
  },
)

这样修改后，提交API时就能发送带加号和国家码的完整手机号了。

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