my question is not updating even after changing the index to that question

Question

what i want in this code is that the questions to change to the next one in the map whenever the user presses any of the true of false buttons, but the question is not updating even after changing the index and using setstate. I don't know what is wrong here. Please go through the code and check if there are any other issue. Thank You! My code is as:

class _QuestionQuizState extends State<QuestionQuiz> {
  late Map<String, bool> _ques;
  List marks = [];
  double index = 0;
  String t = 'true';
  String f = 'false';

  @override
  void initState() {
    super.initState();
    _ques = widget.questions;
  }

  String display() {
    final questionNo = _ques.keys.elementAt(index.toInt()).toString();
    return questionNo;
  }

  void chooseAnswer(index, text) {
    final answer =
        _ques.values.elementAt(index.toInt()).toString().toLowerCase();
    setState(() {
      if (answer == text) {
        marks.add('1');
      } else {
        marks.add('0');
      }
      index += 1;
      display();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('hello'),
      ),
      body: Column(
        children: [
          const SizedBox(height: 20),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.1,
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [
                  Colors.black,
                  Colors.brown,
                ],
              ),
              // borderRadius: BorderRadius.all(Radius.circular(20)),
              boxShadow: [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 5.0,
                  offset: Offset(0, 2),
                ),
              ],
            ),
            child: Center(
              child: Text(
                display(),
                style: const TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                ),
              ),
            ),
          ),
          const SizedBox(height: 15),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      Colors.black,
                      Colors.brown,
                    ],
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(20)),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black26,
                      blurRadius: 5.0,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: TextButton(
                  onPressed: () {
                    chooseAnswer(index, t);
                  },
                  child: const Text(
                    'True',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                    ),
                  ),
                ),
              ),
              const SizedBox(width: 20),
              Container(
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      Colors.black,
                      Colors.brown,
                    ],
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(20)),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black26,
                      blurRadius: 5.0,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                child: TextButton(
                  onPressed: () {
                    chooseAnswer(index, f);
                  },
                  child: const Text(
                    'False',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                    ),
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 10),
          DisplayResult(
            marks: marks,
          )
        ],
      ),
    );
  }
}

i tried changing the index and took inside the build so that whenever the setstate rebuilds it would change the my question, but alas it did now work aswell.

Answer 1

The confusion is using same variable name index

void chooseAnswer(index, text) {

You already have state index variable. while you are incrementing the index it is updating.

void chooseAnswer(index, text) { //this index being function scope

Not the state index. You can remove it or use different name.

I am ignoring the parameter like

 void chooseAnswer(_, text) {

Answer 2

Try setting variable ex:

var questionText = display();

use this variable in your Text field and recall in setState. btw why don't you declare index as int?