Quiz: Die Frage

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

Die zweite App ist ein Quiz über Flutter selbst: eine Frage, vier Antworten zum Antippen, Grün für richtig und Rot für falsch, eine Punktzahl und ein Ergebnisbildschirm.

Die Fragen sind bereits im Starter enthalten. Jede ist ein Question mit ihrem Text, ihren vier Antworten und der Position der richtigen Antwort:

Question('Which language do you write Flutter apps in?',
    ['Kotlin', 'Swift', 'Dart', 'JavaScript'], 2),

Die Positionen beginnen bei 0, also ist 2 'Dart'. Der Zustand speichert _index, die Frage, bei der du gerade bist, und questions[_index] ist diese Frage.

Die Antworten sind eine Collection for innerhalb der Column: eine Schaltfläche pro Antwort. FilledButton.tonal ist eine sanft gefüllte Schaltfläche in der Theme-Farbe und eignet sich gut für eine Auswahl an Optionen. Mit crossAxisAlignment: CrossAxisAlignment.stretch macht die Spalte jedes ihrer untergeordneten Elemente so breit wie sie selbst, sodass alle vier Schaltflächen bündig nebeneinander liegen.

Aufgabe

Einfach

Zeige die erste Frage an:

füge dem Zustand int _index = 0; hinzu
ersetze das Center durch eine Column mit 24 Pixeln Innenabstand, die ihre untergeordneten Elemente über die gesamte Breite streckt
darin: den Text der Frage im Stil headlineSmall des Themes, 24 Pixel Abstand und anschließend für jede Antwort einen FilledButton.tonal mit 16 Pixeln Innenabstand und 12 Pixeln Abstand darunter

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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Quiz')),
      body: const Center(
        child: Text('Your quiz goes here'),
      ),
    );
  }
}