How can I update a variable to display some text, have a delay, then update another variable also displaying text?

Question

I'm currently trying to create an app with Flutter that helps a user memorize French vocabulary. I want the user to be able to click a button to check their answer, see immediately whether their answer is right or wrong, and then a have a delay of a few seconds to view their corrected answer, before the question changes. Here's a snippet of my code:

Padding(
          padding: const EdgeInsets.fromLTRB(10.0, 100.0, 0.0, 0.0),
          child: RaisedButton(
            color: Colors.white,
            child: Text(
              'Check Answer.',
              style: TextStyle(
                fontFamily: 'Oswald',
                fontStyle: FontStyle.italic,
                fontSize: 18.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            onPressed: (){
              answer = myController.text;
              isCorrect = (answer == answers.elementAt(element));
              isCorrect == true ? AnswerMessage = "Correct!" : answerMessage = "Sorry, that answer was incorrect.";
              Future.delayed(const Duration(milliseconds: 5000), () {
                setState(() {
                  element = question.nextInt(3);
                  word = questions.elementAt(element);
                });
              });
            },
          ),
        ),

For reference, I've created two arrays, one for questions and one for the answers and the variable 'element' is simply a random number that is plugged into both arrays to generate the question and the expected answer.

I get the user's answer using a controller in a TextField widget and then compare it to the appropriate element in the 'answers' array. Based on whether the above condition is true or false, I update the 'answerMessage' variable to display on the screen whether the answer is correct or not. After this, I have tried to put a delay of around 5 seconds before the 'element' variable is given a new random integer value (which corresponds to a new question being randomly picked from my 'questions' array) before the 'word' variable that is being displayed on screen is updated to reflect the new question. I can't find any issues with my code, yet for some reason, my program instead waits 5 seconds before even displaying whether the user is correct or not, and then immediately updates the question, which defeats the delay's purpose as the whole point of the delay is for the user to have some time to see if their answer is correct before moving on to the next question.

Solution 1

Your Question is clear and the change you need to make is in the onPressed function:

onPressed: (){
  
  answer = myController.text;
  isCorrect = (answer == answers.elementAt(element));
  isCorrect == true ? answerMessage = "Correct!" : answerMessage = "Sorry, that answer was incorrect.";

  setState(() {
  });

 Future.delayed(const Duration(milliseconds: 5000), () {
            setState(() {
              element = question.nextInt(3);
              word = questions.elementAt(element);
            });
          });
}

When you click the button, you are not actually updating the state, so you cannot see if the answer is right or wrong. It appears after 5 seconds, along with the updated question.

Better code for this :

   isCorrect == true ? answerMessage = "Correct!" : answerMessage = "Sorry, that answer was incorrect.";

is this one:

answerMessage = (isCorrect == true ) ?  "Correct!" : "Sorry, that answer was incorrect.";

Solution 2

So the issue lies in the CheckAnswer button's onPressed().When you are doing

isCorrect == true ? answerMessage = "Correct!" : answerMessage = "Sorry, that answer was incorrect.";

you are not calling setState() so that the UI can update the message accordingly. The setState() is directly called after the 5 seconds delay.

So your solution should be to add a setState() immediately after you call the Future.delayed. So your code in onPressed should look like:

answer = myController.text;
isCorrect = (answer == answers.elementAt(element));
isCorrect == true ? answerMessage = "Correct!" : answerMessage = "Sorry, that answer was incorrect.";
Future.delayed(const Duration(milliseconds: 5000), () {
  setState(() {
    element = question.nextInt(3);
    word = questions.elementAt(element);
  });
});
setState((){}); // <-- add this line here.

Solution 3

Hope this will help you. You should call setState() first for checking the answer. In your code, it calling when the delay over. That's why your answer is correct or not and the next question updating at the same time.

onPressed: (){
              answer = myController.text;
              isCorrect = (answer == answers.elementAt(element));
              isCorrect == true ? answerMessage = "Correct!" : answerMessage = "Sorry, that answer was incorrect.";
              setState(() {
          
              });
              Future.delayed(const Duration(milliseconds: 5000), () {
                setState(() {
                  element = question.nextInt(3);
                  word = questions.elementAt(element);
                });
              });
    },