Flutter Phone Number TextField With Country Code - flutter

Question

I'm trying to make the phone number field in the design. I'm using the intl_phone_number_input package for this but I couldn't do it like in my design.
I would be glad if you can help with this.
My design:
My Output:
My code:
InternationalPhoneNumberInput(
hintText: 'Telefon Numarası',
onInputChanged: (PhoneNumber number) {
print(number.phoneNumber);
},
onInputValidated: (bool value) {
print(value);
},
ignoreBlank: false,
autoValidateMode: AutovalidateMode.disabled,
selectorTextStyle: TextStyle(
color: Colors.black,
backgroundColor: Colors.grey,
),
selectorConfig: const SelectorConfig(
selectorType: PhoneInputSelectorType.DROPDOWN,
setSelectorButtonAsPrefixIcon: true,
leadingPadding: 0,
showFlags: false,
trailingSpace: false),
initialValue: PhoneNumber(isoCode: 'TR'),
textFieldController: TextEditingController(),
formatInput: false,
keyboardType: TextInputType.numberWithOptions(
signed: true, decimal: true),
inputBorder: UnderlineInputBorder(),
inputDecoration: InputDecoration(
floatingLabelAlignment: FloatingLabelAlignment.start,
labelText: 'Telefon Numarası',
),
textStyle: AppTextStyle().getSfProDisplayMedium(Colors.black),
onSaved: (PhoneNumber number) {
print('On Saved: $number');
},
),

Answer 1

I think we can use a combination of two types widget, I try use Stack
And this is my UI:
My code:
Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Telefon Numarası',
style: TextStyle(color: Colors.grey),
),
Container(
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(width: 1, color: Colors.grey))
),
child: Stack(
children: [
Positioned(
bottom: 10,
top: 10,
left: 0,
child: Container(
height: 30,
width: 80,
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(5),
),
child: Row(
children: const [
Spacer(),
Icon(CupertinoIcons.chevron_down, size: 16,),
SizedBox(width: 5,),
],
),
),
),
SizedBox(
height: 50,
child: InternationalPhoneNumberInput(
hintText: 'Telefon Numarası',
onInputChanged: (PhoneNumber number) {
print(number.phoneNumber);
},
onInputValidated: (bool value) {
print(value);
},
ignoreBlank: false,
autoValidateMode: AutovalidateMode.disabled,
selectorTextStyle: const TextStyle(
color: Colors.black,
),
selectorConfig: const SelectorConfig(
selectorType: PhoneInputSelectorType.BOTTOM_SHEET,
setSelectorButtonAsPrefixIcon: false,
leadingPadding: 10,
showFlags: false,
trailingSpace: true,
),
initialValue: PhoneNumber(isoCode: 'TR'),
textFieldController: TextEditingController(),
formatInput: false,
keyboardType: TextInputType.numberWithOptions(
signed: true, decimal: true),
inputDecoration: const InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent)
),
floatingLabelAlignment: FloatingLabelAlignment.start,
// labelText: 'Telefon Numarası',
),
textStyle: const TextStyle(color: Colors.black),
onSaved: (PhoneNumber number) {
print('On Saved: $number');
},
),
),
],
),
),
],
),
),