how to fix the country picker layout please "flutter"

Question

at this part I have a problem I need the way to the custom country picker which i tried to solve it with different approaches but it does not work
i don't know to overcome it

                   Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [

                        Container(

                          decoration: BoxDecoration(border: Border.all(
                              color: Colors.black, width: 1)),
                          child: CountryCodePicker(

                            onChanged: (country) {
                              setState(() {
                                dialCodeDigits = country.dialCode!;
                              });
                            },
                            initialSelection: 'دولة الإمارات العربية المتحدة',
                            showCountryOnly: true,
                            showOnlyCountryWhenClosed: true,
                            favorite: ['+971', 'UAE', '+966', 'KSA'],
                            //padding: EdgeInsets.symmetric(horizontal: ),
                            textStyle: TextStyle(
                                color: Color(0xff000000),
                                fontSize: 14,
                                wordSpacing: 5),
                            enabled: true,
                            // alignLeft: false,
                              flagWidth: 28,
                            padding: EdgeInsets.symmetric(horizontal: 25),
                          ),
                        ),
                       

Answer 1

use this package country_picker . Which has a fields called phoneCode.

TextField(
                  decoration: InputDecoration(
                    contentPadding: const EdgeInsets.symmetric(
                        vertical: 15.0, horizontal: 15),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                      borderSide: BorderSide(
                        color: Colors.white,
                        width: 1,
                      ),
                    ),
                    prefixIcon: TextButton(
                      onPressed: () {
                        showCountryPicker(
                          context: context,
                          onSelect: (value) {
                            setState(
                              () {
                                _selectedCountry = value;
                              },
                            );
                          },
                        );
                      },
                      child: Text(
                        "${_selectedCountry.flagEmoji} +${_selectedCountry.phoneCode}",
                      ),
                    ),
                    hintText: "Enter Phone Number",
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                ),

The initial value of country is set as Afghanistan which is.

Country _selectedCountry = Country.from(
json: {
  "e164_cc": "93",
  "iso2_cc": "AF",
  "e164_sc": 0,
  "geographic": true,
  "level": 1,
  "name": "Afghanistan",
  "example": "701234567",
  "display_name": "Afghanistan (AF) [+93]",
  "full_example_with_plus_sign": "+93701234567",
  "display_name_no_e164_cc": "Afghanistan (AF)",
  "e164_key": "93-AF-0"
});