How can I add label text for dropdown button

Question

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

Yes...I want this type of dropdown...but when value is null in dropdown that time label text size should be equal to dropdownlist value's size — Avdhesh Purohit, Oct 07 '21 at 07:13
Share your full code, or check dropdownvalue initialization. — Rohit Chaurasiya, Oct 07 '21 at 08:24

score 2 · Answer 1 · answered Oct 07 '21 at 08:42

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 Here

Your Result screen->

I cant understand what do you want which title text do you talk? — Ravindra S. Patil, Oct 07 '21 at 08:57
as per my knowledge for `ListTile` Widget and documetation [here](https://api.flutter.dev/flutter/material/ListTile-class.html) I think no remove space between title and subtitle — Ravindra S. Patil, Oct 07 '21 at 09:12
@AvdheshPurohit look at my answer you can use stack to remove the unwanted gap, but @Ravindra use `ListTile`, and it takes its own space by default. — Jahidul Islam, Oct 07 '21 at 09:14

Jahidul Islam · Accepted Answer · 2021-10-07T09:09:25.050

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:

How can I add label text for dropdown button

2 Answers2