Quiz: Ergebnismeldung

Teil des Abschnitts Projekte der Flutter-Journey von Coddy. Lektion 18 von 36.

„Du hast 5 von 5 Punkten erzielt“ verdient mehr als nur eine schlichte Zeile. Schließe das Quiz mit einem großen Symbol und einer zum Ergebnis passenden Nachricht ab: eine Trophäe für eine perfekte Runde, ein Daumen hoch für die meisten richtigen Antworten und sonst eine aufmunternde Nachricht.

Drei Ergebnisse, vom besten abwärts geprüft, ergeben ein if / else if / else. Die Reihenfolge ist wichtig: Eine perfekte Punktzahl bedeutet auch, dass mehr als die Hälfte richtig ist. Prüfe deshalb zuerst darauf.

if (score == total) {
  message = 'Perfect!';
  icon = Icons.emoji_events;
} else if (score * 2 >= total) {
  message = 'Well done!';
  icon = Icons.thumb_up;
} else {
  message = 'Keep practicing!';
  icon = Icons.school;
}

score * 2 >= total bedeutet „mindestens die Hälfte“, ohne dass gerundet wird: 3 von 5 reicht, 2 von 5 nicht.

Deklariere message, icon und color vor dem if ohne Wert. Dart prüft, ob jeder Zweig jeder Variablen einen Wert zuweist, bevor du sie verwendest.

Dies ist die letzte Lektion des Quiz. Die Prüfungen spielen vollständige Runden durch: Farben, Punktestand, Ergebnisse und erneutes Spielen.

Aufgabe

Mittel

Auf dem Ergebnisbildschirm, oberhalb der Punktzahl:

Bei voller Punktzahl werden Perfect! und ein bernsteinfarbenes Icons.emoji_events angezeigt
Bei mindestens der Hälfte werden Well done! und ein grünes Icons.thumb_up angezeigt
Bei weniger wird Keep practicing! und Icons.school in der primären Farbe des Designs angezeigt

Das Symbol ist 96 Pixel groß, gefolgt von 16 Pixel Abstand, der Nachricht in headlineMedium, 8 Pixeln und der Punktzahlzeile, jetzt in titleMedium.

Probier es selbst

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const QuizScreen(),
    );
  }
}

class Question {
  const Question(this.text, this.answers, this.correct);

  final String text;
  final List<String> answers;
  final int correct;
}

const List<Question> questions = [
  Question('Which widget stacks its children from top to bottom?', ['Row', 'Column', 'Stack', 'Wrap'], 1),
  Question('Which language do you write Flutter apps in?', ['Kotlin', 'Swift', 'Dart', 'JavaScript'], 2),
  Question('What does setState do?', ['Rebuilds the widget', 'Saves the app', 'Closes the screen', 'Plays a sound'], 0),
  Question('Which widget shows a list you can scroll?', ['Container', 'SizedBox', 'Padding', 'ListView'], 3),
  Question('Which widget adds space around its child?', ['Padding', 'Center', 'Icon', 'Text'], 0),
];

class QuizScreen extends StatefulWidget {
  const QuizScreen({super.key});

  @override
  State<QuizScreen> createState() => _QuizScreenState();
}

class _QuizScreenState extends State<QuizScreen> {
  int _index = 0;
  int? _picked;
  int _score = 0;

  Question get _question => questions[_index];
  bool get _answered => _picked != null;
  bool get _isLast => _index == questions.length - 1;

  void _pick(int answer) {
    if (_answered) return;
    setState(() {
      _picked = answer;
      if (answer == _question.correct) {
        _score++;
      }
    });
  }

  Future<void> _next() async {
    if (!_isLast) {
      setState(() {
        _index++;
        _picked = null;
      });
      return;
    }
    await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => ResultsScreen(score: _score, total: questions.length),
      ),
    );
    setState(() {
      _index = 0;
      _picked = null;
      _score = 0;
    });
  }

  Color? _colorFor(int answer) {
    if (!_answered) return null;
    if (answer == _question.correct) return Colors.green;
    if (answer == _picked) return Colors.red;
    return null;
  }

  @override
  Widget build(BuildContext context) {
    final question = _question;
    final textTheme = Theme.of(context).textTheme;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Quiz'),
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 16),
            child: Center(
              child: Text('Score: $_score', style: textTheme.titleMedium),
            ),
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              'Question ${_index + 1} of ${questions.length}',
              style: textTheme.labelLarge,
            ),
            const SizedBox(height: 8),
            LinearProgressIndicator(
              value: (_index + 1) / questions.length,
              minHeight: 8,
              borderRadius: BorderRadius.circular(4),
            ),
            const SizedBox(height: 24),
            Text(question.text, style: textTheme.headlineSmall),
            const SizedBox(height: 24),
            for (int i = 0; i < question.answers.length; i++)
              Padding(
                padding: const EdgeInsets.only(bottom: 12),
                child: FilledButton.tonal(
                  style: FilledButton.styleFrom(
                    backgroundColor: _colorFor(i),
                    foregroundColor: _colorFor(i) == null ? null : Colors.white,
                    padding: const EdgeInsets.all(16),
                  ),
                  onPressed: () => _pick(i),
                  child: Text(question.answers[i]),
                ),
              ),
            if (_answered) ...[
              const SizedBox(height: 12),
              Text(
                _picked == question.correct
                    ? 'Correct!'
                    : 'The answer is ${question.answers[question.correct]}',
                textAlign: TextAlign.center,
                style: textTheme.titleMedium,
              ),
              const SizedBox(height: 16),
              FilledButton(
                onPressed: _next,
                child: Text(_isLast ? 'See results' : 'Next'),
              ),
            ],
          ],
        ),
      ),
    );
  }
}

class ResultsScreen extends StatelessWidget {
  const ResultsScreen({super.key, required this.score, required this.total});

  final int score;
  final int total;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Results')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'You scored $score out of $total',
                style: Theme.of(context).textTheme.headlineSmall,
              ),
              const SizedBox(height: 32),
              FilledButton.icon(
                onPressed: () => Navigator.pop(context),
                icon: const Icon(Icons.replay),
                label: const Text('Play again'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}