Repeat wrong flipcharts in a quiz app in flutter - flutter

Question

I have to make a simple study app for a school project, where I want that the user can repeat only the question, which he marked as wrong. Those should be shown as the "original" flipchart. In the class Auswertung I created a button which should have this task. In my Code you just chose one or multiple themes with mulitiple questions each. Than the Flipcharts are shown like they should be. After a specific amount of asnwered questions (currently 2) you get navigated to the overview page, where it should be possible to repeat only the Flipcharts which where marked as wrong.
The following class is for choosing the themes
mport 'package:flutter/material.dart';
import 'package:jagd/widgets/CustomAppBar.item.dart';
import '../../widgets/Baden-Württemberg/Fragen/FlipchartsBW.item.dart';
class FragenBW extends StatefulWidget {
const FragenBW({super.key, required wrongQuestions});
#override
// ignore: library_private_types_in_public_api
_FragenBWState createState() => _FragenBWState();
}
class _FragenBWState extends State<FragenBW> {
String number = '';
final List<String> _themes = [
'Theme 1',
'Theme 2',
'Theme 3',
'Theme 4',
'Theme 5',
'Theme 6',
'Theme 7',
'Theme 8',
];
final List<bool> _selected = List.filled(8, false);
final Map<String, List<Flipchart>> _flipcharts = {
'Theme 1': [
Flipchart(question: 'Question 1', answer: 'Answer 1'),
Flipchart(question: 'Question 1.1', answer: 'Answer 1.2'),
],
'Theme 2': [
Flipchart(question: 'Question 2', answer: 'Answer 2'),
Flipchart(question: 'Question 2.2', answer: 'Answer 2.2'),
],
'Theme 3': [
Flipchart(question: 'Question 3', answer: 'Answer 3'),
Flipchart(question: 'Question 3.2', answer: 'Answer 3.2'),
],
'Theme 4': [
Flipchart(question: 'Question 4', answer: 'Answer 4'),
Flipchart(question: '4.2', answer: 'Answer 4.2'),
],
'Theme 5': [
Flipchart(question: 'Question 5', answer: 'Answer 5'),
Flipchart(question: 'Question 5.2', answer: 'Answer 5.2'),
],
'Theme 6': [
Flipchart(question: 'Question 6', answer: 'Answer 6'),
Flipchart(question: 'Question 6.2', answer: 'Answer 6.2'),
],
'Theme 7': [
Flipchart(question: 'Question 7', answer: 'Answer 7'),
Flipchart(question: 'Question 7.2', answer: 'Answer 7.2'),
],
'Theme 8': [
Flipchart(question: 'Question 8', answer: 'Answer 8'),
Flipchart(question: 'Question 8.2', answer: 'Answer 8.2'),
],
// Add more flipcharts for each theme
};
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[900],
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.grey[850],
title: const CustomAppBar(title: "Questions/Answers"),
bottom: const PreferredSize(
preferredSize: Size.fromHeight(10),
child: SizedBox(
height: 10,
),
),
),
body: Column(
children: <Widget>[
for (int i = 0; i < _themes.length; i++)
CheckboxListTile(
value: _selected[i],
onChanged: (bool? value) {
setState(() {
_selected[i] = value ?? false;
});
},
title: Text(
_themes[i],
style: const TextStyle(color: Colors.white),
),
),
const SizedBox(
height: 8,
),
Container(
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: Colors.grey[850]!,
style: BorderStyle.solid)),
child: TextButton(
child: const Text(
'learning',
style: TextStyle(color: Colors.white),
),
onPressed: () {
bool atLeastOneSelected = false;
for (int i = 0; i < _selected.length; i++) {
if (_selected[i]) {
atLeastOneSelected = true;
break;
}
}
if (atLeastOneSelected) {
// Code to navigate to next screen
List<Flipchart> selectedFlipcharts = [];
for (int i = 0; i < _themes.length; i++) {
if (_selected[i]) {
selectedFlipcharts.addAll(_flipcharts[_themes[i]]!);
}
}
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlipchartBW(
flipcharts: selectedFlipcharts.toList(),
onShowWrongFlipcharts: () {},
),
),
);
}
}),
),
],
));
}
}
class Flipchart {
final String question;
final String answer;
Flipchart({required this.question, required this.answer});
String get getName => question;
String get getContent => answer;
}
class CustomAppBar extends StatelessWidget {
final String title;
const CustomAppBar({
Key? key,
required this.title,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.grey[850],
width: double.infinity,
height: 76,
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
// IconButton(
// icon: const Icon(
// Icons.arrow_back_ios_new,
// color: Colors.white,
// size: 25,
// ),
// onPressed: () {
// Navigator.pop(context);
// },
// ),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold),
textAlign: TextAlign.end,
),
),
),
],
),
],
),
),
);
}
}
The next Class is for the flipcharts:
import 'package:flutter/material.dart';
import 'package:jagd/widgets/Baden-W%C3%BCrttemberg/Fragen/Auswertung.item.dart';
import 'package:jagd/widgets/CustomAppBar.item.dart';
import '../../../Pages/Baden-Württemberg/FragenBW.item.dart';
class FlipchartBW extends StatefulWidget {
final List<Flipchart> flipcharts;
final void Function() onShowWrongFlipcharts;
const FlipchartBW(
{Key? key, required this.flipcharts, required this.onShowWrongFlipcharts})
: super(key: key);
#override
// ignore: library_private_types_in_public_api
_FlipchartBWState createState() => _FlipchartBWState();
}
class _FlipchartBWState extends State<FlipchartBW>
with SingleTickerProviderStateMixin {
int currentIndex = 0;
bool showAnswer = false;
int correct = 0;
int wrong = 0;
List<Flipchart> wrongFlipcharts = [];
void rightButtonPressed() {
correct++;
checkAnswers();
}
void wrongButtonPressed() {
wrong++;
wrongFlipcharts.add(widget.flipcharts[currentIndex]);
checkAnswers();
}
void checkAnswers() {
if (correct + wrong == 5) {
// Change Number of Queastions that have to be answered
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Auswertung(
correct: correct,
wrong: wrong,
numberofQuestions: 5,
wrongFlipcharts:
wrongFlipcharts.isEmpty ? const [] : wrongFlipcharts,
),
),
);
}
}
void nextQuestion() {
setState(() {
currentIndex = (currentIndex + 1) % widget.flipcharts.length;
showAnswer = false;
});
}
void previousQuestion() {
setState(() {
if (currentIndex == 0) {
currentIndex = currentIndex;
} else {
currentIndex = (currentIndex - 1 + widget.flipcharts.length) %
widget.flipcharts.length;
}
showAnswer = false;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[900],
appBar: AppBar(
backgroundColor: Colors.grey[850],
title: const CustomAppBar(title: "Questions/Answers"),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(10),
child: SizedBox(
height: 10,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: wrong,
child: Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
),
),
Expanded(
flex: correct,
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(10),
),
),
),
],
),
),
),
),
body: Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: double.infinity,
height: 100,
decoration: const BoxDecoration(
color: Colors.green,
),
child: Center(
child: Text(
widget.flipcharts.isNotEmpty
? widget.flipcharts[currentIndex].question
: "",
style: const TextStyle(color: Colors.white, fontSize: 20),
),
),
),
const SizedBox(height: 8),
Padding(
padding: const EdgeInsets.fromLTRB(50, 0, 50, 0),
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: Colors.grey[850]!,
style: BorderStyle.solid)),
child: Visibility(
visible: !showAnswer,
child: TextButton(
child: const Text(
"Show Answer",
style: TextStyle(color: Colors.white),
),
onPressed: () {
setState(() {
showAnswer = true;
});
},
),
),
),
),
Column(
children: <Widget>[
Visibility(
visible: showAnswer,
child: Container(
width: double.infinity,
height: 200,
decoration: const BoxDecoration(
color: Colors.blue,
),
child: Center(
child: Text(
widget.flipcharts.isNotEmpty
? widget.flipcharts[currentIndex].answer
: "",
style:
const TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
const SizedBox(height: 20),
],
),
],
),
),
bottomNavigationBar: Container(
height: 100,
decoration: const BoxDecoration(color: Colors.transparent),
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: Colors.grey[850]!,
style: BorderStyle.solid)),
child: TextButton(
onPressed: previousQuestion,
child: const Icon(Icons.navigate_before, color: Colors.white),
),
),
const SizedBox(
width: 4,
),
Visibility(
visible: showAnswer,
child: Expanded(
flex: 1,
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: Colors.grey[850]!,
style: BorderStyle.solid)),
child: TextButton(
child: const Text("WRONG",
style: TextStyle(color: Colors.red)),
onPressed: () {
setState(() {
wrong++;
});
checkAnswers();
nextQuestion();
},
),
),
),
),
const SizedBox(
width: 4,
),
Visibility(
visible: showAnswer,
child: Expanded(
flex: 1,
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: Colors.grey[850]!,
style: BorderStyle.solid)),
child: TextButton(
child: const Text("RIGHT",
style: TextStyle(color: Colors.green)),
onPressed: () {
setState(() {
correct++;
});
checkAnswers();
nextQuestion();
},
),
),
),
),
const SizedBox(
width: 4,
),
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
border: Border.all(
width: 1.0,
color: Colors.grey[850]!,
style: BorderStyle.solid)),
child: TextButton(
onPressed: nextQuestion,
child: const Icon(Icons.navigate_next, color: Colors.white),
),
),
],
),
),
),
);
}
}
//------------------------------------------------------------------------------
class CustomAppBar extends StatelessWidget {
final String title;
const CustomAppBar({
Key? key,
required this.title,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.grey[850],
width: double.infinity,
height: 76,
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
// IconButton(
// icon: const Icon(
// Icons.arrow_back_ios_new,
// color: Colors.white,
// size: 25,
// ),
// onPressed: () {
// Navigator.pop(context);
// },
// ),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold),
textAlign: TextAlign.end,
),
),
),
],
),
],
),
),
);
}
}
The last part is for the overview and the button for the repeat of the wrong Flipcharts
import 'package:flutter/material.dart';
import '../../../Pages/Baden-Württemberg/FragenBW.item.dart';
import 'FlipchartsBW.item.dart';
class Auswertung extends StatelessWidget {
const Auswertung({
Key? key,
required this.correct,
required this.wrong,
required this.wrongFlipcharts,
required int numberofQuestions,
}) : super(key: key);
final int correct;
final int wrong;
final List<Flipchart> wrongFlipcharts;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey[850],
appBar: // here the desired height
AppBar(
title: const CustomAppBar(title: "Overview"),
backgroundColor: Colors.grey[850],
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: double.infinity,
height: 100,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(7)),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 8),
child: Row(
children: [
Expanded(
flex: 1,
child: Column(
children: [
const Center(
child: Text("Right:",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15.5)),
),
const SizedBox(height: 5),
Center(
child: Text("$correct",
style: const TextStyle(
color: Colors.green,
fontSize: 40,
)),
),
],
),
),
Expanded(
flex: 1,
child: Column(
children: [
const Center(
child: Text("Wrong:",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15.5)),
),
const SizedBox(height: 5),
Center(
child: Text("$wrong",
style: const TextStyle(
color: Colors.red, fontSize: 40)),
),
],
),
),
],
),
),
],
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
child: Container(
height: 50,
width: double.infinity,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(7)),
),
child: TextButton(
onPressed: () => _showWrongFlipcharts(context),
child: const Text('Repeat Wrong questions',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15.5)),
),
),
),
],
)),
);
}
void _showWrongFlipcharts(BuildContext context) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FlipchartBW(
flipcharts: wrongFlipcharts,
onShowWrongFlipcharts: () => _showWrongFlipcharts(context),
),
),
);
}
}
class CustomAppBar extends StatelessWidget {
final String title;
const CustomAppBar({
Key? key,
required this.title,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.grey[850],
width: double.infinity,
height: 76,
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
// IconButton(
// icon: const Icon(
// Icons.arrow_back_ios_new,
// color: Colors.white,
// size: 25,
// ),
// onPressed: () {
// Navigator.pop(context);
// },
// ),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold),
textAlign: TextAlign.end,
),
),
),
],
),
],
),
),
);
}
}
I tried what my knowledge can do but I was not able to impelent it the right way