如何在容器中显示国家代码

Question

我正在处理 phone 数字文本字段，所以我得到了 this 包，我想要它的 CustomDecoration 样式，但我没有得到它。这是我的代码。


Widget phonetextformfieldCustomwithouticon(context, width, controller, height) {
  return Container(
    width: width,
   
    child: InternationalPhoneNumberInput(
      inputDecoration: InputDecoration(
         contentPadding:EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
         
      },
      
    ),
  );
}

更新：

我希望国家/地区应该有一些填充，因为它从最左边开始，当我在其中添加验证时，redner flow

Container(
                width: MediaQuery.of(context).size.width * 0.9,
                height: 55.0,
                 decoration: BoxDecoration(
                border: Border.all(color: HexColor("#6e6b7b")),
                color: Colors.white,
                borderRadius: BorderRadius.all(
                  Radius.circular(10),
                ),
              ),
                child: InternationalPhoneNumberInput(
                  inputDecoration: InputDecoration(
                  contentPadding:EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
                  labelText: "Phone number",
                  labelStyle:  GoogleFonts.montserrat(color: HexColor("#6e6b7b")),
                  hintStyle: GoogleFonts.montserrat(),
                  hintText: "Enter a phone number",
                  border: InputBorder.none,
                  focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(
                            width: 0.0,
                  ))),
              
              // enabledBorder: InputBorder.none,
                  onInputChanged: (PhoneNumber number) {
                    print(number.phoneNumber);
                  },
                  onInputValidated: (bool value) {
                    print(value);
                  },
                  selectorConfig: SelectorConfig(
                    selectorType: PhoneInputSelectorType.DIALOG,
                  ),
                  ignoreBlank: false,
                  autoValidateMode: AutovalidateMode.disabled,
                  selectorTextStyle: TextStyle(color: Colors.black),
                  // initialValue: number,
                  textFieldController: contactNo,
                  formatInput: false,
                  keyboardType: TextInputType.numberWithOptions(
                      signed: true, decimal: true),
                  inputBorder: InputBorder.none,
                  onSaved: (PhoneNumber number) {
                    print('On Saved: $number');
                  },
                ),
              ),

这是输出：

Answer 1

试试下面的代码希望它对 you.refer 包 here and example here

有帮助

创建变量：

final GlobalKey<FormState> formKey = GlobalKey<FormState>();
  final TextEditingController controller = TextEditingController();
  String initialCountry = 'NG';
  PhoneNumber number = PhoneNumber(isoCode: 'NG');

创建一个获取号码的函数并处理您的控制器

void getPhoneNumber(String phoneNumber) async {
    PhoneNumber number =
        await PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber, 'US');

    setState(() {
      this.number = number;
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

您的小部件：

 Container(
            padding: EdgeInsets.all(7),
            color: Colors.blue,
            child: Card(
              child: Form(
                key: formKey,
                child: Container(
                  padding: EdgeInsets.all(8.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      InternationalPhoneNumberInput(
                        onInputChanged: (PhoneNumber number) {
                          print(number.phoneNumber);
                        },
                        onInputValidated: (bool value) {
                          print(value);
                        },
                        selectorConfig: SelectorConfig(
                          selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
                        ),
                        ignoreBlank: false,
                        autoValidateMode: AutovalidateMode.disabled,
                        selectorTextStyle: TextStyle(color: Colors.black),
                        initialValue: number,
                        textFieldController: controller,
                        formatInput: false,
                        keyboardType: TextInputType.numberWithOptions(
                            signed: true, decimal: true),
                        inputBorder: InputBorder.none,
                        onSaved: (PhoneNumber number) {
                          print('On Saved: $number');
                        },
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),

您需要的结果屏幕->

Answer 2

我刚刚写了这个：

InternationalPhoneNumberInput(
            onInputChanged: (val) {},
            inputDecoration: InputDecoration(
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  width: 0.0,
                ),
              ),
              enabledBorder: InputBorder.none,
            ),
          ),

看起来像这样：

但我无法在 android 上测试它。你能试试这个吗？

如何在容器中显示国家代码

How to show country code in the container

textfield

flutter