Error with displaying message after quiz ends , flutter - flutter

Question

Image
There are 3 questions in my app currently and as per my code after all my questions are answered one by one, a widget should appear on the screen which completely fills the screen and which should say " You did it". But unfortunately, I have been trying a lot and still can't find solution.
below is code for main.dart
import 'package:flutter/material.dart';
import './quiz.dart';
import './result.dart';
//void main(){
//runApp(MyApp());
//}
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
final _questions = const [
{
'questionText': 'What\'s is your favourite color? ',
'answers': ['Black', 'Red', 'Green', 'white'],
},
{
'questionText': 'What\'s is your favourite animal?',
'answers': ['Snake', 'Elephant', 'Lion'],
},
{
'questionText': 'Who is your favourite instructor? ',
'answers': ['Max', 'Max', 'Max', 'Max'],
},
];
var _questionIndex = 0;
void _answerQuestion() {
// var aBool= true;
// aBool = false;
setState(() {
_questionIndex = _questionIndex;
});
print(_questionIndex);
if (_questionIndex < _questions.length) {
print('We have more questions!');
} else {
print('No more questions!');
}
}
#override
Widget build(BuildContext context) {
// var dummy = ['Hello'];
// dummy.add('Max');
// print(dummy);
// dummy = [];
// questions = [];
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My First App'),
),
body : _questionIndex <= 2
? Quiz(
answerQuestion: _answerQuestion,
questionIndex: _questionIndex,
questions: _questions,
)
: Result(),
),
);
}
}
below is code for question.dart
import 'package:flutter/material.dart';
class Question extends StatelessWidget {
final String questionText;
Question(this.questionText);
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: EdgeInsets.all(10),
child: Text(
questionText,
style: TextStyle(fontSize: 28),
textAlign: TextAlign.center,
),
);
}
}`
below id code for answer.dart
import 'package:flutter/material.dart';
class Answer extends StatelessWidget {
final Function selectHandler;
final String answerText;
Answer(this.selectHandler, this.answerText);
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
child: RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Text(answerText),
onPressed: selectHandler,
),
);
}
}
below is code for quiz.dart
import 'package:flutter/material.dart';
import './question.dart';
import './answer.dart';
class Quiz extends StatelessWidget {
final List<Map<String, Object>>questions;
final int questionIndex;
final Function answerQuestion;
Quiz({
#required this.questions,
#required this.answerQuestion,
#required this.questionIndex,
});
Widget build(BuildContext context) {
return Column(
children: [
Question(
questions[questionIndex]['questionText'],
),
...(questions[questionIndex]['answers'] as List<String>)
.map((answer) {
return Answer(answerQuestion, answer);
}).toList()
],
);
}
}
below is code for result.dart
import 'package:flutter/material.dart';
class Result extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Text('You did it!'),
);
}
}

Answer 1

The moment I fixed the following line, your app started working as you described. Going through each question and then showing the "You did it!" text.
setState(() {
_questionIndex++;
});
You were just doing _questionIndex = _questionIndex before, which doesn't change any value.

Answer 2

I am not getting the error you mentioned,
Here what I did,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final _questions = const [
{
'questionText': 'What\'s is your favourite color? ',
'answers': ['Black', 'Red', 'Green', 'white'],
},
{
'questionText': 'What\'s is your favourite animal?',
'answers': ['Snake', 'Elephant', 'Lion'],
},
{
'questionText': 'Who is your favourite instructor? ',
'answers': ['Max', 'Max', 'Max', 'Max'],
},
];
var _questionIndex = 0;
void _answerQuestion(String question, String selectedAnswer) {
print("==============================================");
print("QUESTION: $question");
print("SELECTED ANSWER: $selectedAnswer");
print("==============================================");
setState(() {
_questionIndex++;
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('My First App'),
),
body: _questionIndex < _questions.length //TODO:
? Quiz(
quizQuestion: _questions[_questionIndex]["questionText"],
quizOptions: _questions[_questionIndex]["answers"],
onAnswerSelect: _answerQuestion,
)
: Result(),
),
);
}
}
class Quiz extends StatelessWidget {
final String quizQuestion;
final List<String> quizOptions;
final void Function(String, String) onAnswerSelect;
Quiz({
#required this.quizQuestion,
#required this.quizOptions,
#required this.onAnswerSelect,
});
Widget build(BuildContext context) {
return Column(
children: [
Question(quizQuestion),
...quizOptions.map(
(option) => Answer(
answerText: option,
selectHandler: () => onAnswerSelect(quizQuestion, option),
),
),
],
);
}
}
class Question extends StatelessWidget {
final String questionText;
Question(this.questionText);
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
margin: EdgeInsets.all(10),
child: Text(
questionText,
style: TextStyle(fontSize: 28),
textAlign: TextAlign.center,
),
);
}
}
class Answer extends StatelessWidget {
final String answerText;
final VoidCallback selectHandler;
Answer({this.answerText, this.selectHandler});
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
child: RaisedButton(
color: Colors.blue,
textColor: Colors.white,
child: Text(answerText),
onPressed: selectHandler,
),
);
}
}
class Result extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Text('You did it!'),
);
}
}