I am trying to display the answer user have chosen.

In the code below i have fetched a list of quizzes and displayed. I tried to change the background color of the chosen option by the user to different color than the others but when i execute the codes all of the quizzes get affected.

Please suggest a simple and easy way because i am not really a programmer of flutter developer i am just learning and have gotten quite not far.

Thanks in advance

  Widget MyQuizzesCardUI(String question, String OptionID, String Option1, String Option2, String Option3, String Option4, String MyChoice, String Status, int index) {
    bool opt1 = false;
    bool opt2 = false;
    return Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: Color(0xffefefef), width: 0.5)),
      child: Column(
        children: [
          Container(
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Container(
                      child: InkWell(
                        onTap: () {
                          opt1 = true;
                          opt2 = false;
                          setState(() {
                            opt1 = true;
                            opt2 = false;
                          });
                        },
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            width: double.infinity,
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: opt1 ? Color(0xffa4c3ff) : Colors.white,
                            ),
                            child: Text(
                              "${Option1}",
                            ),
                          ),
                        ),
                      ),
                    ),
                    Container(
                      child: InkWell(
                        onTap: () {
                          opt1 = false;
                          opt2 = true;
                          setState(() {
                            opt1 = false;
                            opt2 = true;
                          });
                        },
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            width: double.infinity,
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: opt2 ? Color(0xffa4c3ff) : Colors.white,
                            ),
                            child: Text(
                              "${Option2}",
                            ),
                          ),
                        ),
                      ),
                    ),
                  ]
              ))
        ],
      ),
    );
  }

CodePudding user response：

it doesen't change becase when you call setState it reload the whole class so also it will set again to the begining value.

let's create a list like this:

List<Map<String, Bool>> options = [
  {
    "opt1": false;
    "opt2": false;
  }
];

and to fill up the list you can use this code in the initState like this:

@override
  void initState() {
    super.initState();

    for(int i = 0; i>questions.length; i  ) {
      options.add({"opt1": false, "opt2": false}); 
    }

in your widget it works than like this:

Widget MyQuizzesCardUI(String question, String OptionID, String Option1, String Option2, String Option3, String Option4, String MyChoice, String Status, int index) {
    return Container(
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: Color(0xffefefef), width: 0.5)),
      child: Column(
        children: [
          Container(
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Container(
                      child: InkWell(
                        onTap: () {
                          options[index]["opt1"] = true;
                          options[index]["opt2"] = false;
                          setState(() {
                            options[index]["opt1"] = true;
                            options[index]["opt2"] = false;
                          });
                        },
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            width: double.infinity,
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: options[index]["opt1"] ? Color(0xffa4c3ff) : Colors.white,
                            ),
                            child: Text(
                              "${options[index]["opt1"]}",
                            ),
                          ),
                        ),
                      ),
                    ),
                    Container(
                      child: InkWell(
                        onTap: () {
                          options[index]["opt1"] = false;
                          options[index]["opt2"] = true;
                          setState(() {
                            options[index]["opt1"] = false;
                            options[index]["opt2"] = true;
                          });
                        },
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            width: double.infinity,
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: options[index]["opt2"] ? Color(0xffa4c3ff) : Colors.white,
                            ),
                            child: Text(
                              "${options[index]["opt2"]}",
                            ),
                          ),
                        ),
                      ),
                    ),
                  ]
              ))
        ],
      ),