4.5 Methoden und Punktezähler hinzufügen
Integrieren Sie als erstes eine Methode, die prüft, ob Sie das Listenende erreicht haben.
1. Ende der Liste abfragen
Für diese Methode reicht eine einfache if-Anweisung, die überprüft, ob die Variable statementCounter grösser oder gleich der Länge von statementsAndAnswers ist. Über die Eigenschaft .length kann man die Listenlänge abfragen und die -1 ist notwenig, da unsere statementCounter Variable beim Index 0 beginnt zu zählen.
Fügen Sie diese Methode nach der Zeile mit der Definition und Initialisierung der statementCounter Variable ein.
// 1
int statementCounter = 0;
bool checkIfLastStatement() {
if (statementCounter >= statementsAndAnswers.length - 1) {
return true;
} else {
return false;
}
}
2. Überprüfen der Antworten
Fügen Sie den folgenden Code nach der Methode checkIfLastStatement() ein.
// 2
void checkAnswer(bool userPickedAnswer) {
bool correctAnswer = statementsAndAnswers[statementCounter].statementAnswer;
setState(() {
// prüfen, ob das Ende des Quiz erreicht wurde
if (checkIfLastStatement() == true) {
// statementCounter zurücksetzen
statementCounter = 0;
// scoreKeeper zurücksetzen
scoreKeeper = [];
}
// wenn noch nicht das Ende erreicht wurde, folgende Schritte wiederholen:
else {
if (userPickedAnswer == correctAnswer) {
scoreKeeper.add(Icon(
Icons.check,
color: Colors.green,
));
} else {
scoreKeeper.add(Icon(
Icons.close,
color: Colors.red,
));
}
statementCounter++;
}
});
}
3. Inhalt der onPressed-Methode anpassen
Wie Sie sehen können, haben Sie den gesamten Code aus der onPressed-Methode in eine eigene Methode mit dem Namen checkAnswer ausgegliedert. Ebenfalls prüfen Sie in dieser Methode mit einem Aufruf der checkIfLastStatement-Methode, ob das Ende der Liste erreicht wurde und setzen dann die Zählvariable und die Liste mit dem Punktezähler zurück.
Damit diese Methode einwandfrei funktioniert, müssen Sie den Code in der onPressed-Methode der Wahr-Schaltfläche löschen und durch
setState(() {
checkAnswer(true);
});
ersetzen. Für die onPressed-Methode der Falsch-Schaltfläche gehen Sie gleich vor und ersetzen setState durch:
setState(() {
checkAnswer(false);
});
4. Spielende mit Statement-Objekt signalisieren
Damit beim Spielen des Quiz auch bei der letzten Aussage das Haken- oder Kreuz-Icon erscheint und am Ende eine Meldung erscheint, dass das Spiel fertig ist, müssen Sie Ihre Liste statementsAndAnswers noch durch ein weiteres Statement-Objekt ergänzen.
List statementsAndAnswers = [
Statement(s: 'Geöffnete Apps brauchen viel Akku.', a: false),
Statement(
s: 'Eine Kamera mit mehr Megapixeln resultiert in besseren Bildern.',
a: false),
Statement(s: '5G frisst nicht mehr Daten als 4G.', a: true),
Statement(s: 'Fertig!', a: false),
];
Vollständiger Code mit neuen Methoden
Hier der vollständige Code nach dem Hinzufügen der zwei Methoden und zusätzlichen Aussage um das Spielende zu signalisieren:
import 'package:flutter/material.dart';
import 'statement.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey.shade900,
body: SafeArea(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: QuizPage(),
),
),
),
);
}
}
class QuizPage extends StatefulWidget {
@override
_QuizPageState createState() => _QuizPageState();
}
class _QuizPageState extends State {
List<Icon> scoreKeeper = [];
List statementsAndAnswers = [
Statement(s: 'Geöffnete Apps brauchen viel Akku.', a: false),
Statement(
s: 'Eine Kamera mit mehr Megapixeln resultiert in besseren Bildern.',
a: false),
Statement(s: '5G frisst nicht mehr Daten als 4G.', a: true),
Statement(s: 'Fertig!', a: false),
];
int statementCounter = 0;
bool checkIfLastStatement() {
if (statementCounter >= statementsAndAnswers.length - 1) {
return true;
} else {
return false;
}
}
void checkAnswer(bool userPickedAnswer) {
bool correctAnswer = statementsAndAnswers[statementCounter].statementAnswer;
setState(() {
// prüfen, ob das Ende des Quiz erreicht wurde
if (checkIfLastStatement() == true) {
// statementCounter zurücksetzen
statementCounter = 0;
// scoreKeeper zurücksetzen
scoreKeeper = [];
}
// wenn noch nicht das Ende erreicht wurde, folgende Schritte wiederholen:
else {
if (userPickedAnswer == correctAnswer) {
scoreKeeper.add(Icon(
Icons.check,
color: Colors.green,
));
} else {
scoreKeeper.add(Icon(
Icons.close,
color: Colors.red,
));
}
statementCounter++;
}
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
flex: 5,
child: Padding(
padding: EdgeInsets.all(10.0),
child: Center(
child: Text(
statementsAndAnswers[statementCounter].statementText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25.0,
color: Colors.white,
),
),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.all(15.0),
child: TextButton(
style: TextButton.styleFrom(backgroundColor: Colors.green),
child: Text(
'Wahr',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
onPressed: () {
setState(() {
checkAnswer(true);
});
},
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.all(15.0),
child: TextButton(
style: TextButton.styleFrom(backgroundColor: Colors.red),
child: Text(
'Falsch',
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
onPressed: () {
setState(() {
checkAnswer(false);
});
},
),
),
),
Row(
children: scoreKeeper,
)
],
);
}
}
Übung
Warnmeldung mit Punktzahl einblenden
Ihre Quiz-App ist schon fast fertig. Probieren Sie als Aufgabe mit dem Paket RFlutter Alert in dem setState-Teil der checkAnswer-Methode eine Warnmeldung einzublenden, sobald das Quiz fertig ist. Geben Sie in dieser Warnmeldung ebenfalls die erreichte Punktzahl aus. Hier können Sie nachlesen, wie Sie das RFlutter Paket in Ihr Flutter-Projekt integrieren können. Zur Berechnung der Punkte können Sie eine forEach-Schleife verwenden. In der Variable score sind die Anzahl der Haken-Icon gespeichert.
if (checkIfLastStatement() == true) {
// Anzahl Haken-Icons aufsummieren
int score = 0;
scoreKeeper.forEach((element) {
if (element.icon == Icons.check) {
score++;
}
});
// Das wäre der Standard-Code für eine rFlutter Alert Warnmeldung:
Alert(context: context, title: "RFLUTTER", desc: "Flutter is awesome.").show();
// für unsere Zwecke angepasst:
// hier muss Ihr Code rein ...
// statementCounter zurücksetzen
statementCounter = 0;
// scoreKeeper zurücksetzen
scoreKeeper = [];
}
Wenn alles geklappt hat, kann Ihre Quiz-App nach einer Spielerunde jetzt die Punkte zusammenzählen und eine Warnmeldung ausgeben. Gratulation, Ihre Quiz-App ist fertig!