如何为下拉按钮添加标签文本

Question

我想为下拉按钮添加标签文本。我该怎么做......当我们 select 来自下拉按钮的值时，标签文本应该调整大小。

Container(
                              width: MediaQuery.of(context).size.width * .71,
                              child: DropdownButton(
                                isExpanded: true,
                                iconSize: 15,
                                underline: Container(
                                    child: Column(
                                  children: [
                                    Divider(
                                        thickness: 1,
                                        color: const Color(0xFFa5a5a5))
                                  ],
                                )),
                                value: dropdownvalue,
                                icon: Icon(Icons.keyboard_arrow_down),
                                items: items.map((String items) {
                                  return DropdownMenuItem(
                                      value: items,
                                      child: Text(
                                        items,
                                        style: TextStyle(
                                          fontSize: 10,
                                          fontWeight: FontWeight.w500,
                                          color: const Color(0xFFa5a5a5),
                                        ),
                                      ));
                                }).toList(),
                                onChanged: (newValue) {
                                  setState(() {
                                    dropdownvalue = newValue.toString();
                                  });
                                },
                              ),
                            ),

Answer 1

请尝试使用 Stack

Container(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
        width: MediaQuery.of(context).size.width * .71,
        child: Stack(
          children: [ 
            Text("Select society and location", style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.w500,
              color: Colors.orange,
            ), // adjust your title as you required
           ),
            DropdownButton(
              isExpanded: true,
              iconSize: 15,
                hint: Text(
                  'Select ',
                  style: TextStyle(
                    fontSize: 12, color: const Color(0xFFa5a5a5)
                  ),
                  textAlign: TextAlign.center,
                ),
              underline: Container(
                  child: Column(
                    children: [
                      Divider(
                          thickness: 1,
                          color: const Color(0xFFa5a5a5))
                    ],
                  )),
             // value: dropdownvalue,
              icon: Icon(Icons.keyboard_arrow_down),
              items: item.map((String items) {
                return DropdownMenuItem(
                    value: items,
                    child: Text(
                      items,
                      style: TextStyle(
                        fontSize: 10,
                        fontWeight: FontWeight.w500,
                        color: const Color(0xFFa5a5a5),
                      ),
                    ));
              }).toList(),
              onChanged: (newValue) {
                setState(() {
                    dropdownvalue = newValue.toString();
                });
              },
            )
          ],
        ),
      )

输出：

Answer 2

试试下面的代码希望对你有帮助。我已经尝试创建您的图像，例如下拉菜单

你的字符串

 String? dropdownValue;

您的列表

  List data = [
    "Counter No 1",
    "Counter No 2",
    "Counter No 3",
    "Counter No 4",
  ];

您的小工具

    ListTile(
            title: Text('Select Society and Location'),
            subtitle: Container(
              width: MediaQuery.of(context).size.width * .71,
              child: DropdownButton(
                isExpanded: true,
                underline: Container(
                    child: Column(
                  children: [
                    Divider(
                      thickness: 1,
                      color: Colors.grey,
                    )
                  ],
                )),
                hint: Text(
                  'Select ',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 15,
                  ),
                  textAlign: TextAlign.center,
                ),
                value: dropdownValue,
                onChanged: (newValue) {
                  setState(
                    () {
                      dropdownValue = newValue.toString();
                    },
                  );
                },
                items: data.map<DropdownMenuItem<String>>(
                  (value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(
                        value,
                        style: TextStyle(
                          fontSize: 17,
                        ),
                      ),
                    );
                  },
                ).toList(),
              ),
            ),
          ),

如果您在下拉按钮下方显示下拉值，请参考我的回答

您的结果屏幕->

如何为下拉按钮添加标签文本

How can I add label text for dropdown button

flutter

dart-null-safety