I want to add dropdownMenu like picture below:

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),
              ),
            ),
          ),

CodePudding user response：

use this package

it's customizable you can add your own decoration

https://pub.dev/packages/intl_phone_field

CodePudding user response：

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,
                ))
              ],
            ),
          ),
        ),
      ),