Quiz : Vrai ou faux

Fait partie de la section Projets du Journey Flutter de Coddy. Leçon 11 sur 36.

Appuie sur une réponse et le quiz devrait te dire tout de suite si tu as raison en vert, ou si tu as tort en rouge, et afficher la bonne réponse en vert dans les deux cas, pour que tu l’apprennes.

L’état doit mémoriser la réponse sur laquelle tu as appuyé. int? _picked vaut null jusqu’à ce que tu en choisisses une ; _picked != null signifie donc que tu as répondu. Une fois que c’est fait, les boutons cessent d’être à l’écoute : la première ligne de _pick est une garde.

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

Une petite fonction détermine la couleur de chaque bouton. null signifie « aucune couleur qui me soit propre », et le bouton conserve sa couleur de thème :

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

Les boutons ont maintenant besoin de leur position, et pas seulement de leur texte ; la boucle compte donc : for (int i = 0; i < question.answers.length; i++) s’exécute avec i égal à 0, 1, 2 et 3.

Défi

Difficile

Colorie les réponses :

ajoute int? _picked, les accesseurs _question et _answered, ainsi que les méthodes _pick et _colorFor de la théorie
parcours les réponses par position avec for (int i = 0; ...)
chaque bouton appelle _pick(i) ; son backgroundColor est _colorFor(i), et son texte est blanc lorsqu'il a une couleur

Essayez vous-même

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),
                ),
              ),
          ],
        ),
      ),
    );
  }
}