flutter 如何添加这样的下拉菜单

qoefvg9y 于 2023-01-31 发布在 Flutter

关注(0)|答案(2)|浏览(161)

我想添加下拉菜单，如下图所示：

但是我仍然不知道如何去做。下面是我的代码：

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

flutter

来源：https://stackoverflow.com/questions/75280965/how-to-add-dropdownmenu-like-this

2条答案

按热度按时间

oaxa6hgo1#

使用此软件包

它是可定制，您可以添加自己的装饰
https://pub.dev/packages/intl_phone_field

赞(0）回复(0）举报 2023-01-31

pb3skfrl2#

您可以将容器内的行与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,
                ))
              ],
            ),
          ),
        ),
      ),

赞(0）回复(0）举报 2023-01-31

我来回答

flutter 如何添加这样的下拉菜单

2条答案

使用此软件包

相关问题

热门标签

最新问答