Quiz: Nächste Frage

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

Eine Frage ist kein Quiz. Nachdem du geantwortet hast, sollte dich eine Schaltfläche „Weiter“ zur nächsten Frage bringen, und eine Zeile oben sollte anzeigen, wo du gerade bist.

Weiterzugehen umfasst zwei Änderungen in einem setState: Der Index wird erhöht und die Antwort wird vergessen, sodass die neue Frage ohne Farben beginnt:

void _next() {
  setState(() {
    _index++;
    _picked = null;
  });
}

Die Schaltfläche ist erst sinnvoll, nachdem du geantwortet hast, und nicht bei der letzten Frage, auf die keine weitere folgt (der Ergebnisbildschirm kommt später). Ein Collection-if fügt sie nur dann hinzu: if (_answered && !_isLast) FilledButton(...).

Menschen zählen ab 1, Listen ab 0. Die Beschriftung zeigt _index + 1: 'Question ${_index + 1} of ${questions.length}'. Mit der Form ${...} kannst du einen ganzen Ausdruck in einen String einsetzen, nicht nur einen Namen.

Aufgabe

Mittel

Gehe die Fragen durch:

Füge einen Getter _isLast hinzu, der bei der letzten Frage true ist, sowie die Methode _next aus der Theorie.
Zeige über der Frage Question 1 of 5 (mit den tatsächlichen Zahlen) im Stil labelLarge des Themes an und füge anschließend 24 Pixel Abstand ein.
Zeige unter den Antworten, sobald du geantwortet hast und die Frage nicht die letzte ist, einen FilledButton mit der Beschriftung Next an, der _next aufruft.

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;

  Question get _question => questions[_index];
  bool get _answered => _picked != null;

  void _pick(int answer) {
    if (_answered) return;
    setState(() {
      _picked = answer;
    });
  }

  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')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            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]),
                ),
              ),
          ],
        ),
      ),
    );
  }
}