Home > Mobile >  The setstate() function is called during widget building, though I have passed a pointer to it but i
The setstate() function is called during widget building, though I have passed a pointer to it but i

Time:07-01

Here, I'm providing the image of my main.dart class I'm creating a quiz app in flutter and this is my main.dart file and the "changeQuestions" function is throwing an error in the emulator.

var questionIndex = 0;
  void _changeQuestions() {
    setState(() {
      questionIndex = questionIndex   1;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Center(
            child: Text(
              'Quiz App',
              style: TextStyle(fontSize: 25),
            ),
          ),
        ),
        body: questionIndex < _questions.length
            ? Quiz(
                questions: _questions,
                index: questionIndex,
                changeQue : _changeQuestions)
            : const Center(
                child: Text('You Did It.'),
              ),
      ),
    );
  }
}

Flutter recognizes the 'changeQuestions' as a function called during widget building, though it doesn't recognizes as a pointer. This is my quiz.dart class where I've implemented to call the 'changeQuestion' function through a pointer 'changeque'.

import 'package:flutter/material.dart';
import './questions.dart';
import './answer.dart';
 
class Quiz extends StatelessWidget {
  final List<Map<String, Object>> questions;
  final int index;
  final VoidCallback changeQue;
 
  const Quiz(
      {Key? key,
      required this.questions,
      required this.index,
      required this.changeQue})
      : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Center(
          child: Questions(
            questions[index]['Text'] as String,
          ),
        ),
        ...(questions[index]['Ans'] as List<String>).map((answer) {
          return Answer(changeQue, answer);
        }).toList()
      ],
    );
  }
}

This is my answer.dart where the setState() method is called on 'onPressed'.

import 'package:flutter/material.dart';

class Answer extends StatelessWidget {
  final VoidCallback selectHandler;
  final String receiveans;

  const Answer(this.selectHandler, this.receiveans, {Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(onPressed: selectHandler, child: Text(receiveans)),
    );
  }
}

How might I go about handling this? Or, is there a better way I can go about implementing so that this appears cleaner?

Thanks.

CodePudding user response:

I think you have to call setState() function inside addPostFrameCallback, this function will return callback when the build process is finished. Might be it's work's for you.

Also check doc: addPostFrameCallback

WidgetsBinding.instance!.addPostFrameCallback((_) {
      setState(() {
        questionIndex = questionIndex   1;
      });
    });

CodePudding user response:

It's pretty clear that setState will be called when you tap on the button. You need to provide clear explanation of what's happening.

Every time you call setState, build method of the Widget setState is in will be called.

  • Related