I want to add label text for Dropdown Button. How can I do it.....And label text should be resize when we select value from Dropdown button.

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();
                                  });
                                },
                              ),
                            ),

CodePudding user response：

Try below code hope its helpful to you. I have try to create your image like dropdown

Your String

 String? dropdownValue;

Your List

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

Your Widget

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

If you display dropdown value below of the Dropdown button refer my answer

CodePudding user response：

please try with 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();
                });
              },
            )
          ],
        ),
      )

Output: