Flutter - Show and hide input field when select radio button

John
January 7, 2024
70 views
3 votes
3 Answers

How do I set text field and show and hide text based on radio button. I want to set when select yes text and text field will be visible and when deselect yes text and text field will be hidden. I tried to find info in this regard but was unsuccessful.

My code:

bool select = false;
 String _medicalhistory = "n/a";
Container(
            width: MediaQuery.of(context).size.width > 800
                ? 700
                : MediaQuery.of(context).size.width,
            padding: const EdgeInsets.all(20),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      "Past medical history: ",
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 14,
                          height: 1.5),
                    ),
                    RadioListTile(
                      title: const Text("Yes"),
                      value: "yes",
                      groupValue: _medicalhistory,
                      //onChanged: handleSelection
                      onChanged: (value) {
                        setState(() {
                          _medicalhistory = value!;
                        });
                      },
                    ),
                    const Text(
                        "If yes, please share and describe the previous medical illness: "),
                    const SizedBox(
                      height: 5,
                    ),
                    TextField(
                      controller: myController,
                      maxLength: 1000,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        //hintText: 'Enter a search term',
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        TextButton(
                            onPressed: () {
                              _medicalhistory = myController.text;
                            },
                            child: const Text("Save")),
                      ],
                    ),
                    RadioListTile(
                      title: const Text("No"),
                      value: "no",
                      groupValue: _medicalhistory,
                      onChanged: (value) {
                        setState(() {
                          _medicalhistory = value.toString();
                        });
                      },
                    ),

                  ],
                )
              ],
            ),
          ),

I am attaching the code if anyone is willing to help me. Sorry, I’m new to this. Please guide me and I hope someone is willing to share the code on how to make the design I want.

Tags: dart flutter

Answers

It’s quite simple, check for your condition and use an if.

In this example, were using the spread operator (...) to add multiple items to show in the list:

For example:

if (_medicalhistory == "yes")...[
    TextField()
    AnotherWidgetWhenConditionIsYes()
    ...
  ]

Your complete code would look like:

 Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width > 800
          ? 700
          : MediaQuery.of(context).size.width,
      padding: const EdgeInsets.all(20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            "Past medical history: ",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, height: 1.5),
          ),
          RadioListTile(
            title: const Text("Yes"),
            value: "yes",
            groupValue: _medicalhistory,
            onChanged: (value) {
              setState(() {
                _medicalhistory = value.toString();
              });
            },
          ),
          // use if statement to show the textfield only when the value is yes
          if (_medicalhistory == "yes") ...[
            const Text("If yes, please share and describe the previous medical illness: "),
            const SizedBox(height: 5),
            TextField(
              controller: myController,
              maxLength: 1000,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                TextButton(
                  onPressed: () {
                    _medicalhistory = myController.text;
                  },
                  child: const Text("Save"),
                ),
              ],
            ),
          ],
          RadioListTile(
            title: const Text("No"),
            value: "no",
            groupValue: _medicalhistory,
            onChanged: (value) {
              setState(() {
                _medicalhistory = value.toString();
              });
            },
          ),
        ],
      ),
    );
  }

See also

How to show/hide widgets programmatically in Flutter

Use turnery operator or if to see if medicalhistory == "Yes" then display textbox

 String medicalhistory = "No";

  @override
  Widget build(BuildContext context) {
  return Scaffold(
   body: Container(
        width: MediaQuery.of(context).size.width > 800 ? 700 : MediaQuery.of(context).size.width,
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  "Past medical history: ",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, height: 1.5),
                ),
                RadioListTile(
                  title: const Text("Yes"),
                  value: "Yes",
                  groupValue: medicalhistory,
                  //onChanged: handleSelection
                  onChanged: (value) {
                    setState(() {
                      medicalhistory = value!;
                    });
                  },
                ),
                medicalhistory == "Yes"
                    ? Column(
                        children: [
                          const Text("If yes, please share and describe the previous medical illness: "),
                          const SizedBox(
                            height: 5,
                          ),
                          TextField(
                            controller: myController,
                            maxLength: 1000,
                            decoration: const InputDecoration(
                              border: OutlineInputBorder(),
                              //hintText: 'Enter a search term',
                            ),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              TextButton(
                                  onPressed: () {
                                    medicalhistory = myController.text;
                                  },
                                  child: const Text("Save")),
                            ],
                          ),
                        ],
                      )
                    : const SizedBox(),
                RadioListTile(
                  title: const Text("No"),
                  value: "No",
                  groupValue: medicalhistory,
                  onChanged: (value) {
                    setState(() {
                      medicalhistory = value!;
                    });
                  },
                ),
              ],
            )
          ],
        ),
      ),
     )
   }

You can use ValueNotifier which will rebuild only specific widget

final ValueNotifier<bool> showText = ValueNotifier<bool>(false);

   RadioListTile(
                  title: const Text("Yes"),
                  value: "Yes",
                  groupValue: medicalhistory,
                  //onChanged: handleSelection
                  onChanged: (value) {
                   showText.value=value;
                  },
                ),



ValueListenableBuilder<bool>(
          builder:  (context, value, _) {
              return value?Column( 
                   children:[
                      const Text(
                    "If yes, please share and describe the previous medical 
                             illness: "),
                const SizedBox(
                  height: 5,
                ),
                TextField(
                  controller: myController,
                  maxLength: 1000,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    //hintText: 'Enter a search term',
                  ),
                ),
                         ]
                       ):const SizedBox.shrink() ;
             }),

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – Show and hide input field when select radio button

Answers