Flutter Int_phone_field how to align text field to the country code selector

Question

I have been trying to align the country code selector with the phone number text field. Please help, the following is the problem and the code. I need everything horizontally centered.

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,
    );
  }
}

Solution

I have faced the same issue. This problem is with the plugin itself:

I have made the required changes here and it looks like this now: