Highlighting two radio buttons at once

Question

I'm trying to build an app in flutter in which during quiz, I'm using radio buttons. I want to highlight the correct answer and the answer selected by the user if the correct answer is not selected by the user.

If the correct answer is selected then I just want to select the user selected answer.

I cannot find any way to do it.

child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              widget.content.getQuestion(),
              style: Constants.articleQuestionStyle,
            ),
            Container(),
            Column(
                children: widget.content
                    .getOptions()
                    .map<Widget>((value)  => _buildRadioBtn(value))
                    .toList()),

//
//                {
//                  return Row(children: [
//                    Radio(
//                      value: value,
//                      groupValue: widget.content.getGuess(),
//                      onChanged: (val){
//                        print("value:  ${value}");
//                        print("isChecked:  ${widget.content.isChecked()}");
//                        return //_buildRadioBtn(val);
////                                widget.content.isChecked()
////                                  ? null :
//                          _buildRadioBtn(val);//_handleValueChanged(val);
//                      },
//                      activeColor: (widget.content.getGuess() == widget.content.getCorrectAnswer())? Colors.orange: Colors.red,
//                    ),
//
//                    Text(
//                      value,
//                      style: Constants.articleBodyTextStyle,
//                    )
//                  ]);
//                }
//                ).toList()),

and

  _buildRadioBtn(value) {
//    bool isCorrect = widget.content.getCorrectAnswer().contains(value);
//    bool isChosen = widget.content.getGuess().contains(value);
    return Row(
      children: <Widget>[
        Radio(
          value: widget.content.isChecked(),
          groupValue: widget.content.getGuess(),
          onChanged: (value){
            if(!widget.content.isChecked()) {
//              print("ffffff");
//              widget.content.registerGuess(value);
//              print("abc");
//              setState(() {});
            _handleValueChanged(value);
            }
          },
          activeColor: (
              widget.content.getGuess() == widget.content.getCorrectAnswer())? Colors.orange: Colors.red,
        ),

        Text(
//          "hello",
          value,
          style: Constants.articleBodyTextStyle,
        )
      ],
    );
  }
}

The way I think it will work is to rebuild the radio button once the user selects the answer, but I cannot do so. Please help.

Answer 1

Method: 1

String question = 'Q 1', answer = 'A 3', defaultValue = 'nil';
      List<String> options = ['A 1', 'A 2', 'A 3', 'A 4'], info = ['', '', '', ''];
      List<Color> bgs = [Colors.white, Colors.white, Colors.white, Colors.white];

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                ListTile(title: Text(question)),
                ListView.builder(
                    shrinkWrap: true,
                    itemCount: options.length,
                    itemBuilder: (cc, ii) {
                      return Card(
                        color: bgs[ii],
                        child: ListTile(
                          title: Text(options[ii]),
                          subtitle: Text(info[ii]),
                          leading: Radio(
                            value: options[ii],
                            groupValue: defaultValue,
                            onChanged: (String value) {
                              setState(() {
                                defaultValue = value;
                              });
                            },
                          ),
                        ),
                      );
                    }),
                RaisedButton(
                    onPressed: () {
                      if (defaultValue == answer) {
                        setState(() {
                          int ind = options.indexOf(defaultValue);
                          bgs[ind] = Colors.green;
                          info[ind] = 'Correct Answer !';
                        });
                      } else {
                        setState(() {
                          int wrongInd = options.indexOf(defaultValue);
                          bgs[wrongInd] = Colors.redAccent;
                          info[wrongInd] = 'Wrong Answer !';
                          int correctInd = options.indexOf(answer);
                          bgs[correctInd] = Colors.green;
                          info[correctInd] = 'Correct Answer !';
                        });
                      }
                    },
                    child: Text('Submit'))
              ],
            ),
          ),
        );
      }

Method: 2

String question = 'Q 1', answer = 'A 3', defaultValue = 'nil';
  List<String> options = ['A 1', 'A 2', 'A 3', 'A 4'], info = ['', '', '', ''],radioValues=[];
  List<Color> bgs = [Colors.black, Colors.black, Colors.black, Colors.black];

  @override
  void initState(){
    super.initState();
    radioValues.addAll(options);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            ListTile(title: Text(question)),
            ListView.builder(
                shrinkWrap: true,
                itemCount: options.length,
                itemBuilder: (cc, ii) {
                  return ListTile(
                    title: Text(options[ii],
                               style:TextStyle(color:bgs[ii])),
                    subtitle: Text(info[ii],
                                  style:TextStyle(color:bgs[ii])),
                    leading: Radio(
                      value: radioValues[ii],
                      groupValue: defaultValue,
                      onChanged: (String value) {
                        setState(() {
                          defaultValue = value;
                        });
                      },
                    ),
                  );
                }),
            RaisedButton(
                onPressed: () {
                  if (defaultValue == answer) {
                    setState(() {
                      int ind = options.indexOf(defaultValue);
                      bgs[ind] = Colors.green;
                      info[ind] = 'Correct Answer !';
                    });
                  } else {
                    setState(() {
                      int wrongInd = options.indexOf(defaultValue);
                      bgs[wrongInd] = Colors.redAccent;
                      info[wrongInd] = 'Wrong Answer !';
                      int correctInd = options.indexOf(answer);
                      bgs[correctInd] = Colors.green;
                      info[correctInd] = 'Correct Answer !';
                      radioValues[wrongInd] = defaultValue;
                      radioValues[correctInd] = defaultValue;
                    });
                  }
                },
                child: Text('Submit'))
          ],
        ),
      ),
    );
  }

Answer 2

I suggest that you leave the select state of what the user picked. What you can do is change the colors or styling of the text of the items to reflect which the user picked vs which is the correct answer.