Flutter: Hide/Show a widget by key from another widget

Question

I am making a questionnaire application in which user has to give answers to each question.

My screen contains five questions and I have a question which is

Q2 Please select your car model

1. BMW (radio)
2. AUDI (radio)
3. Other (radio)

If the user clicks on the 3rd option, it should show another question

Q2:1 Please enter your car make

This question is initially hidden. It is shown only when user clicks on above 3rd option {Textbox}.

How to show/hide widgets dynamically by key?

my code for widget:

 case ("RADIO"): // if answer type is equal to radio (majority of answers are radio)
        var index = listAnswers
            .indexWhere((pair) => pair['key'] == objQuestion.questionId);
        for (Answer ans in objQuestion.answers) {
          // fetching answer index
          var ansIndex = listAnswers[index]['answer']
              .indexWhere((pair) => pair['key'] == ans.answerId);
          answerWidget.add(
              //   StatefulBuilder(
              //   builder: (BuildContext context, StateSetter setState) {
              // return
              Container(
                  child: Padding(
            padding: EdgeInsets.all(10.0),
            child: RadioListTile(
              // key: _key,
              title: Text(ans.answerText),
              value: listAnswers[index]['answer'][ansIndex]['key'],
              groupValue: listAnswers[index]['selectedValue'],
              onChanged: (val) {
                setState(() {
                  listAnswers[index]['answer'].asMap().forEach(
                      (index, keyPair) => keyPair['value'] =
                          false); // making all other answer option selected value to false
                  listAnswers[index]['answer'][ansIndex]['value'] =
                      true; // making current answer option selected value to true
                  listAnswers[index]['selectedValue'] =
                      val; // setting current selected value to selected answer answerId which is key value

                  // if (val == 3)
                  //    widget.show() where key == qid2-1;
                  // else
                  // //    widget.hide() where key == qid2-1;
                });
              },
              secondary: const Icon(Icons.check),
              activeColor: Color.fromRGBO(223, 0, 61, 1),
            ),
          )));
          // }));
        }
        return answerWidget;
        break;

my code for widget where I am making questions.

ListView generateForm() {
    return ListView.builder(
      itemCount: listQuestions.length,
      itemBuilder: (context, index) => Card(
        color: Color.fromRGBO(232, 232, 232, 1),
        elevation: 0,
        child: Padding(
          key: Key(listQuestions[index].questionNo.toString()),
          padding: const EdgeInsets.all(18.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text(
                listQuestions[index].questionNo.toString() +
                    '. ' +
                    listQuestions[index].questionText.toString(),
                style: TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.normal,
                ),
              ),
              if (listQuestions[index].helpboxes?.isNotEmpty == true)
                FittedBox(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      // have to go inside expansion tile like we are doing for answers
                      FilterChip(
                        backgroundColor: Colors.grey[100],
                        label: Text(
                          listQuestions[index]
                              .helpboxes[0]
                              .helpboxText
                              .substring(1, 60),
                        ),
                        onSelected: (b) {},
                      )
                    ],
                  ),
                ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: getAnswerWidget(listQuestions[index]),
              ),
            ],
          ),
        ),
        //children: getAnswerWidget(form[index]),
      ),
    );
  }

Answer 1

You can use Flutters visibility class to do this.

bool isVisible;

...

Visibility(
  visible: isVisible,
  child: TextView(
  ...
  ),
),

Then you can modify the 3rd Radio Buttons onChanged method to set isVisible to true (you will likely need to call the notifylisteners method as the object will have changed) More info on Visibility in flutter: https://api.flutter.dev/flutter/widgets/Visibility-class.html