Flutter - 单击显示文本字段时的下拉列表

Question

I'm quite new in Flutter, so how do I show a textfield widget below right after an user click one of the dropdown list value?

Here is the codes for my Dropdown button

final items = ['Healthy', 'Unhealthy'];
 ...

    DropdownMenuItem<String> buildMenuItem(String item) => DropdownMenuItem(
          value: item,
          child: Text(
            item,
            style: const TextStyle(
              fontSize: 16,
              // fontWeight: FontWeight.bold,
              fontFamily: "Ubuntu",
              color: Colors.black54,
            ),
          ),
        );

     ...

      Container(
        width: scrwidth * 0.8,
        height: scrheight / 14,
        padding: const EdgeInsets.symmetric(
            horizontal: 12, vertical: 4),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(color: Colors.black54, width: 1),
        ),
        child: DropdownButtonHideUnderline(
          child: DropdownButton<String>(
            icon: const Icon(
              Icons.arrow_drop_down,
              color: Colors.black54,
            ),
            hint: const Text(
              "Health",
              style: TextStyle(
                fontFamily: "Ubuntu",
                fontWeight: FontWeight.bold,
              ),
            ),
            isExpanded: true,
            value: value,
            items: items.map(buildMenuItem).toList(),
            onChanged: (value) =>
                setState(() => this.value = value),
          ),
        ),
      ),

Here's how it's look now (without the textfield):

I've been looking for the solution on the internet but none seems to help me understand.

Thank you in advance!

Answer 1

You can use a visibility widget to show/hide a textfield. This will be controlled by a state variable, which we will call isVisible. So we have

bool isVisible = false;

.....

Visibility(
    visible: isVisible,
    child: TextField(),
);

By default, the textfield won't be shown, but we can make it visible when a dropdown list value is selected.

DropdownButtonHideUnderline(
    ....
onChanged: (value) =>
          setState(() {
              this.value = value;
              if (this.value == "Unhealthy") {
                  isVisible = true;
               } else {
                  isVisible = false;
                      }
                })
           );