Quiz: Richtig oder falsch

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

Tippe auf eine Antwort, und das Quiz sollte dir sofort Bescheid geben: grün, wenn du richtig lagst, rot, wenn du falsch lagst, und die richtige Antwort in jedem Fall grün, damit du sie lernst.

Der Zustand muss sich merken, auf welche Antwort du getippt hast. int? _picked ist null, bis du auf eine Antwort tippst, daher bedeutet _picked != null, dass du geantwortet hast. Sobald du geantwortet hast, reagieren die Schaltflächen nicht mehr: Die erste Zeile von _pick ist eine Schutzabfrage.

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

Eine kleine Funktion ermittelt die Farbe jeder Schaltfläche. null bedeutet „keine eigene Farbe“, und die Schaltfläche behält ihre Designfarbe bei:

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

Die Schaltflächen benötigen jetzt ihre Position und nicht nur ihren Text, daher zählt die Schleife: for (int i = 0; i < question.answers.length; i++) wird mit i als 0, 1, 2 und 3 ausgeführt.

Aufgabe

Schwer

Färbe die Antworten:

Füge int? _picked, die Getter _question und _answered sowie die Methoden _pick und _colorFor aus der Theorie hinzu
Durchlaufe die Antworten anhand ihrer Position mit for (int i = 0; ...)
Jede Schaltfläche ruft _pick(i) auf; ihr backgroundColor ist _colorFor(i), und ihr Text ist weiß, wenn sie eine Farbe hat

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;

  @override
  Widget build(BuildContext context) {
    final question = questions[_index];
    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 (String answer in question.answers)
              Padding(
                padding: const EdgeInsets.only(bottom: 12),
                child: FilledButton.tonal(
                  style: FilledButton.styleFrom(
                    padding: const EdgeInsets.all(16),
                  ),
                  onPressed: () {},
                  child: Text(answer),
                ),
              ),
          ],
        ),
      ),
    );
  }
}