Question 77104 in Flutter Question posted in
The official Flutter documentation can be found here.

How to add dropdownMenu for Phone Number – Flutter

I want to add dropdownMenu like picture below:

enter image description here

But I still do not know how to do it.
Here is my code:

 SizedBox(
            width: 400,
            height: 60,
            child: TextField(
              style: body1(color: ColorName.neutralTextPrimary),
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderSide: const BorderSide(
                    color: ColorName.neutralTextSecondary,
                  ),
                  borderRadius: BorderRadius.circular(10),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: const BorderSide(
                    color: ColorName.neutralTextSecondary,
                  ),
                ),
                hintText: 'Phone Number',
                hintStyle: body1(color: ColorName.neutralTextSecondary),
              ),
            ),
          ),
Tags:

2

Answers


  1. 0

    use this package

    it’s customizable you can add your own decoration

    https://pub.dev/packages/intl_phone_field

    Login or Signup to reply.
  2. 0

    You can use row inside a container with DropdownMenu

      static const List<String> codes = ['+62', '+82', '+1'];


    Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12), border: Border.all()),
            child: Row(
              children: [
                Padding(
                  padding: const EdgeInsets.all(4),
                  child: DropdownButton(
                      icon: const Icon(
                        Icons.expand_more,
                      ),
                      value: _selectedIndex,
                      items: codes
                          .map((e) => DropdownMenuItem(
                                value: codes.indexOf(e),
                                child: Text(e),
                              ))
                          .toList(),
                      onChanged: (v) {
                        _selectedIndex = v ?? 0;
                        setState(() {});
                      }),
                ),
                const Padding(
                  padding: EdgeInsets.all(2),
                  child: Divider(
                    color: Colors.black,
                    thickness: 2,
                  ),
                ),
                Expanded(
                    child: TextFormField(
                  textAlign: TextAlign.center,
                ))
              ],
            ),
          ),
        ),
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search