Flutter Int_phone_field 如何将文本字段与国家代码选择器对齐答案

【问题标题】：Flutter Int_phone_field how to align text field to the country code selectorFlutter Int_phone_field 如何将文本字段与国家代码选择器对齐
【发布时间】：2021-11-18 03:36:17
【问题描述】：

我一直在尝试将国家/地区代码选择器与电话号码文本字段对齐。请帮忙，以下是问题和代码。我需要所有东西水平居中。

class RoundedPhoneField extends StatelessWidget {
  final String hintText;
  final IconData icon;
  final ValueChanged<String> onChanged;
  const RoundedPhoneField({
    Key? key,
    required this.hintText,
    this.icon = Icons.person,
    required this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PhoneFieldContainer(
      child: IntlPhoneField(
        decoration: InputDecoration(
          labelText: hintText,
          isCollapsed: true,
          floatingLabelBehavior: FloatingLabelBehavior.never,
          border: InputBorder.none,
        ),
        initialCountryCode: 'ZM',
        onChanged: (phone) {
          print(phone.completeNumber);
        },
      ),
    );
  }
}


class PhoneFieldContainer extends StatelessWidget {
  final Widget child;
  const PhoneFieldContainer({
    Key? key,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
        padding: EdgeInsets.fromLTRB(20, 10, 20, 5,),
      width: size.width * 0.8,
      decoration: BoxDecoration(
        color: kPrimaryLightColor,
        borderRadius: BorderRadius.circular(29),
      ),
      child: child,
    );
  }
}

【问题讨论】：

标签： flutter authentication flutter-dependencies

【解决方案1】：

我也遇到过同样的问题。这个问题出在插件本身：

我已经进行了必要的更改here，现在看起来像这样：

【讨论】：