Flutter/Dart - Dynamically controlling CheckboxListTile inside Listview.Builder

Question

I am trying to create a page that lists a number of questions. For each question I will have different answers. At the minute, whenever I select an answer, the same option on the other questions are selected at the same time. How can I avoid this and make each question its own entity? Here is my code:

      class QuestionScreen extends StatefulWidget {
    
      @override
      _QuestionScreenState createState() => _QuestionScreenState();
    }
    
    class _QuestionScreenState extends State<QuestionScreen> {
      List<bool> _isChecked;
    
   
    final Map<String, Map> questions = {"milk comes from what animal": 
    {"horse": false, "monkey": false, "frog": false, "cow": true}, 
    "what colour is the sea?": 
    {"red": false, "green": false, "blue": true, "yellow": false}};

  @override
  void initState() {
    super.initState();
    _isChecked = List<bool>.filled(questions.values.length, false);
  }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                child: Text("questions page"),
              ),
              Expanded(
                child: new ListView.builder(
                  itemCount: questions.keys.length,
                  itemBuilder: (BuildContext ctxt, int questionTitleIndex) {
                    return Padding(
                      padding: const EdgeInsets.all(24.0),
                      child: Container(
                        height: MediaQuery.of(context).size.height * 0.45,
                        decoration: BoxDecoration(
                          color: OurTheme().ourCanvasColor,
                          borderRadius: BorderRadius.circular(25),
                        ),
                        child: Column(
                          children: [
                            Text(
                              questions.keys.toList()[questionTitleIndex],
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 24,
                                  fontWeight: FontWeight.w800),
                            ),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: ListView.builder(
                                shrinkWrap: true,
                                itemCount: questions.values
                                    .toList()[questionTitleIndex]
                                    .keys
                                    .length,
                                itemBuilder:
                                    (BuildContext ctxt, int questionAnswersIndex) {
                                  return Container(
                                    decoration: BoxDecoration(border: Border.all()),
                                    child: CheckboxListTile(
                                      title: Text(
                                        "${questionAnswersIndex + 1}. ${questions.values.toList()[questionTitleIndex].keys.toList()[questionAnswersIndex]}",
                                        style: TextStyle(
                                            color: Colors.white, fontSize: 16),
                                      ),
                                      value: _isChecked[questionAnswersIndex],
                                      controlAffinity:
                                          ListTileControlAffinity.platform,
                                      onChanged: (bool value) {
                                        setState(
                                          () {
                                            _isChecked[questionAnswersIndex] =
                                                value;
                                          },
                                        );
                                      },
                                      activeColor: OurTheme().ourCanvasColor,
                                      checkColor: Colors.white,
                                    ),
                                  );
                                },
                              ),
                            )
                          ],
                        ),
                      ),
                    );
                  },
                ),
              )
            ],
          ),
        );
      }
    }

Answer 1

I see a few problems here.

First since your need to maintain the answer for each question in your _isChecked. It would make more sense to make it a Map<String, String> instead of a List<bool>.

Inside it, the key will be the question title and the value will be the selected option title.

So, inside your initState, you will initiate it liket this.

Map<String, String> _isChecked = {}; // Initializing with empty map

@override
void initState() {
  super.initState();
  widget.questions.keys.forEach((key) {


    // For each question we first set the answer as "". means nothing selected.
    _isChecked[key] = "";

    // We then loop over the options of that question to see if any option was already true and set it as the initial answer.
    for (MapEntry entry in widget.questions[key]!.entries) {
      if (entry.value) _isChecked[key] = entry.key;
    }
  });
}

After this, you just have to change the places in your code where you were using the _isChecked variable.

Here is the link to the full working code. Just replace all your code with the code in the link.

Result.