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

CodePudding user response：

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