Flutter quiz app and how to select correct answer - flutter

Question

I am a beginner and self-learning. I'm using Flutter/Dart to make a quiz app. I am stuck on a portion of my code. I have a list with a map inside. It contains the question, four different choices for the question, and the correct answer (answerIndex).
I want to have the function of when a user selects one of the choices, the button will turn into red or green based on if the answer is correct or incorrect. I'm a bit lost on how to go about this with my current code.
class QuizPage extends StatefulWidget {
#override
_QuizPageState createState() => _QuizPageState();
}
class _QuizPageState extends State<QuizPage> {
static const questions = [
{
'questionText':
'What protein is the principal component of skeletal muscle thick filiaments?',
'answersList': ['Actin', 'Myosin', 'Troponin', 'Tropomyosin'],
'answerIndex': 1,
},
{
'questionText': 'What connective tissue surrounds the entire muscle?',
'answersList': ['Epimysium', 'Perimysium', 'Endomysium', 'Plasmalemma'],
'answerIndex': 0,
},
{
'questionText':
'In skeletal muscle cells, calcium initiates contraction by binding to?',
'answersList': ['Tropomyosin', 'Actin', 'Troponin', 'Myosin'],
'answerIndex': 2,
}
];
int questionNumber = 0;
void answeredQuestion() {
if (questionNumber < questions.length) {
setState(() {
questionNumber += 1;
});
}
}
#override
Widget build(BuildContext context) {
return questionNumber < questions.length
? Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
Padding(
padding: EdgeInsets.symmetric(
horizontal: 10.0,
vertical: 30.0,
),
),
Text(
'${questionNumber + 1} of ${questions.length}',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
],
),
Question(
questionText:
questions[questionNumber]['questionText'].toString(),
),
///Answer Choices///
...(questions[questionNumber]['answersList'] as List<String>)
.map((answer) {
return Answer(
selectedAnswer: answeredQuestion, answerText: answer);
}).toList(),
],
)
: Result();
}
}
Here is my code for the Question
lass Question extends StatelessWidget {
final String questionText;
Question({required this.questionText});
#override
Widget build(BuildContext context) {
return Expanded(
flex: 5,
child: Center(
child: Text(questionText,
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
textAlign: TextAlign.center,
),
),
);
}
}
and here is my code for the Answer.
class Answer extends StatelessWidget {
final VoidCallback selectedAnswer;
final String answerText;
Answer({required this.selectedAnswer, required this.answerText});
#override
Widget build(BuildContext context) {
return Expanded(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.amber),
),
child: Text(
answerText,
style: TextStyle(
fontSize: 18.0,
),
),
onPressed: selectedAnswer,
),
),
),
);
}
}

Answer 1

You might want to do something like this:
To make this code work, all that was needed was keeping track of the chosen answer and right answer, and passing them down to the Answer widget.
This way, the Answer widget can know wether it was selected, and wether it is the correct answer, and change its Color accordingly.
Also, it is generally preferable to use for() instead of .map in widgets in flutter. Also, to change the button color, the property primary works better.
class QuizPage extends StatefulWidget {
#override
_QuizPageState createState() => _QuizPageState();
}
class _QuizPageState extends State<QuizPage> {
static const questions = [
{
'questionText':
'What protein is the principal component of skeletal muscle thick filiaments?',
'answersList': ['Actin', 'Myosin', 'Troponin', 'Tropomyosin'],
'answerIndex': 1,
},
{
'questionText': 'What connective tissue surrounds the entire muscle?',
'answersList': ['Epimysium', 'Perimysium', 'Endomysium', 'Plasmalemma'],
'answerIndex': 0,
},
{
'questionText':
'In skeletal muscle cells, calcium initiates contraction by binding to?',
'answersList': ['Tropomyosin', 'Actin', 'Troponin', 'Myosin'],
'answerIndex': 2,
}
];
int questionNumber = 0;
// Keep track of the answers that have been chosen.
Map<int, int> selectedAnswers = {};
void answeredQuestion(int questionIndex, int answerIndex) {
if (questionNumber < questions.length) {
setState(() {
questionNumber += 1;
selectedAnswers[questionIndex] = answerIndex;
});
}
}
#override
Widget build(BuildContext context) {
return questionNumber < questions.length
? Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
Padding(
padding: EdgeInsets.symmetric(
horizontal: 10.0,
vertical: 30.0,
),
),
Text(
'${questionNumber + 1} of ${questions.length}',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
),
),
],
),
Question(
questionText:
questions[questionNumber]['questionText'].toString(),
),
///Answer Choices///
for (var i = 0; i < (questions[questionNumber]['answersList'] as List<String>).length ; i++) Answer(
selectedAnswer: () => answeredQuestion(questionNumber, i), answerText: answer, isSelected: selectedAnswers?[questionNumber] == i, isCorrectAnswer: questions[questionNumber].answerIndex == i);
}).toList(),
],
)
: Result();
}
}
class Answer extends StatelessWidget {
final VoidCallback selectedAnswer;
final String answerText;
final bool isSelected;
final bool isCorrectAnswer;
Answer({required this.selectedAnswer, required this.answerText, required this.isSelected, required this.isCorrectAnswer});
#override
Widget build(BuildContext context) {
return Expanded(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: ElevatedButton(
style: ButtonStyle(primary: () {
if (!isSelected) {
return Colors.amber
}
else if (isCorrectAnswer) {
return Colors.green;
} else {
return Colors.red
}
}
),
child: Text(
answerText,
style: TextStyle(
fontSize: 18.0,
),
),
onPressed: selectedAnswer,
),
),
),
);
}
}