Quiz : La question

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

La deuxième application est un quiz sur Flutter lui-même : une question, quatre réponses sur lesquelles appuyer, du vert pour la bonne réponse et du rouge pour la mauvaise, un score et un écran de résultats.

Les questions sont déjà dans le projet de départ. Chacune est un Question avec son texte, ses quatre réponses et la position de la bonne réponse :

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

Les positions commencent à 0, donc 2 correspond à 'Dart'. L’état conserve _index, la question sur laquelle tu es, et questions[_index] correspond à cette question.

Les réponses sont une collection for dans la Column : un bouton par réponse. FilledButton.tonal est un bouton rempli aux couleurs douces du thème, idéal pour un ensemble de choix. Avec crossAxisAlignment: CrossAxisAlignment.stretch, la colonne donne à chaque enfant la même largeur qu’elle, de sorte que les quatre boutons s’alignent bord à bord.

Défi

Facile

Affiche la première question :

ajoute int _index = 0; à l’état
remplace le Center par une Column avec 24 pixels de marge intérieure, qui étire ses enfants sur toute la largeur
à l’intérieur : le texte de la question dans le style headlineSmall du thème, un espace de 24 pixels, puis un FilledButton.tonal pour chaque réponse, avec 16 pixels de marge intérieure et 12 pixels sous chacun

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