How to move the Quiz interface to the next question? - flutter

Question

Here is the code for a Quiz App I have been making. This is the main.dart file.
import 'package:flutter/material.dart';
import 'list.dart';
void main() {
runApp(
const Quizzler(),
);
}
class Quizzler extends StatefulWidget {
const Quizzler({Key? key}) : super(key: key);
#override
State<Quizzler> createState() => _QuizzlerState();
}
class _QuizzlerState extends State<Quizzler> {
List<Widget> scoreKeeper = [];
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
flex: 6,
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Center(
child: Text(
Quiz().getQuestion(),
style: const TextStyle(
color: Colors.white,
fontSize: 20,
),
textAlign: TextAlign.center,
),
),
),
),
boolButton(Colors.green, 'True'),
boolButton(Colors.red, 'False'),
Row(
children: scoreKeeper,
),
],
),
),
);
}
Expanded boolButton(Color c, String s) {
return Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(c),
),
onPressed: () {
setState(
() {
switcher(s);
Quiz().nextQuestion();
},
);
},
child: Text(
s,
),
),
),
);
}
switcher(String s) {
if (Quiz().getAnswer().toLowerCase() == s.toLowerCase()) {
scoreKeeper.add(
const Icon(
Icons.check,
color: Colors.green,
),
);
} else {
scoreKeeper.add(
const Icon(
Icons.close,
color: Colors.red,
),
);
}
}
}
This is the list.dart file that I imported onto the main.dart file:
import 'question.dart';
class Quiz {
int _counter = 0;
final List<Question> _q = [
Question(
'Cows can only be lead up a flight of stairs and not down.',
'False',
),
Question(
'Approximately one quarter of human bones are in the feet.',
'True',
),
Question(
'A slug\'s blood is green.',
'True',
),
];
void nextQuestion() {
_counter++;
}
String getQuestion() {
return _q[_counter].question;
}
String getAnswer() {
return _q[_counter].answer;
}
}
And this is the question.dart file that I imported onto the list.dart file:
class Question {
String question;
String answer;
Question(this.question, this.answer);
}
In the Quiz app, once I hit True or False it just shows a tick for the right answer (False) and a cross for the wrong answer (True), without moving to the next question. How do I fix this?

Answer 1

Here, you call any variables or methods from Quiz class by calling directly by Quiz(), basically problems occur here.
By calling Quiz() every time you created a new object, there is no tracking of this object. Because you don't save the object.
So, at first, save the object like that...
Quiz quiz = Quiz();
then wherever you call by Quiz(), replace by quiz.
be like..... quiz.getQuestion(),quiz.nextQuestion(),quiz.getAnswer()
I add all three dart file added below ... with the solution of showing a ques ending alert snackbar.
This is the main.dart file.
import 'package:flutter/material.dart';
import 'list.dart';
void main() {
runApp(
const Quizzler(),
);
}
class Quizzler extends StatefulWidget {
const Quizzler({Key? key}) : super(key: key);
#override
State<Quizzler> createState() => _QuizzlerState();
}
class _QuizzlerState extends State<Quizzler> {
/// This is for show snack bar
final _messangerKey = GlobalKey<ScaffoldMessengerState>();
Quiz quiz = Quiz();
List<Widget> scoreKeeper = [];
#override
Widget build(BuildContext context) {
return MaterialApp(
scaffoldMessengerKey: _messangerKey,
home: Scaffold(
backgroundColor: Colors.black,
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
flex: 6,
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Center(
child: Text(
quiz.getQuestion(),
style: const TextStyle(
color: Colors.white,
fontSize: 20,
),
textAlign: TextAlign.center,
),
),
),
),
boolButton(Colors.green, 'True'),
boolButton(Colors.red, 'False'),
Row(
children: scoreKeeper,
),
],
),
),
);
}
Expanded boolButton(Color c, String s) {
return Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(c),
),
onPressed: () {
(quiz.q.length - 1) > quiz.counter ? setState(
() {
switcher(s);
quiz.nextQuestion();
},
) : _messangerKey.currentState!.showSnackBar(
const SnackBar(duration: Duration(seconds : 2),content: Text('No more questions')));
},
child: Text(
s,
),
),
),
);
}
switcher(String s) {
if (quiz.getAnswer().toLowerCase() == s.toLowerCase()) {
scoreKeeper.add(
const Icon(
Icons.check,
color: Colors.green,
),
);
} else {
scoreKeeper.add(
const Icon(
Icons.close,
color: Colors.red,
),
);
}
}
}
This is the list.dart file
import 'question.dart';
class Quiz {
int counter = 0;
final List<Question> q = [
Question(
'Cows can only be lead up a flight of stairs and not down.',
'False',
),
Question(
'Approximately one quarter of human bones are in the feet.',
'True',
),
Question(
'A slug\'s blood is green.',
'True',
),
];
void nextQuestion() {
counter++;
}
String getQuestion() {
return q[counter].question;
}
String getAnswer() {
return q[counter].answer;
}
}
And this is the question.dart file
class Question {
String question;
String answer;
Question(this.question, this.answer);
}