How to set Country code before the phone number with flutter?

15,444

The right way to use this is in Row widget. Prefix won't work here.

           Row(
               children: <Widget>[
                      Expanded(
                        child: CountryPickerDropdown(
                          initialValue: 'in',
                          itemBuilder: _buildDropdownItem,
                          onValuePicked: (Country country) {
                            print("${country.name}");
                          },
                        ),
                      ),
                      Expanded(
                        child: TextField(
                          keyboardType: TextInputType.phone,
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: "Phone Number",
                          ),
                          onChanged: (value) {
                            // this.phoneNo=value;
                            print(value);
                          },
                        ),
                      ),
                    ],
                  ),
Share:
15,444
Shruti Ramnandan Sharma
Author by

Shruti Ramnandan Sharma

I'm an Indian developer for building mobile applications with flutter. linkedin-profile

Updated on December 13, 2022

Comments

  • Shruti Ramnandan Sharma
    Shruti Ramnandan Sharma over 1 year

    I'm trying to putting the country code before the phone number. I usedcountry_pickers package but something gone wrong with my code, my TextField's hintText visibility has gone, it's showing nothing

    here is my widget

     Padding(
                          padding: const EdgeInsets.only(top: 5.0),
                            child:  new Container(
                              padding: const EdgeInsets.only(left: 10.0),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(5.0)),
                              border: Border.all(color: Colors.blue)
                            ),  
                            child: TextField(
    
                              keyboardType: TextInputType.phone,
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: "Phone Number",
                                prefix:  CountryPickerDropdown(
                                  initialValue: 'in',
                                  itemBuilder: _buildDropdownItem,
                                  onValuePicked: (Country country) {
                                    print("${country.name}");
                                  },
                                ),
                              ),
                              onChanged: (value){
                                this.phoneNo=value;
                              },
    
                            ),  
                          ),
                        ),
    

    here's widget method for country code

    Widget _buildDropdownItem(Country country) => Container(
            child: Row(
              children: <Widget>[
                CountryPickerUtils.getDefaultFlagImage(country),
                SizedBox(
                  width: 8.0,
                ),
                Text("+${country.phoneCode}(${country.isoCode})"),
              ],
            ),
          );