الاختبار القصير: السؤال التالي

جزء من قسم المشاريع في رحلة Flutter على Coddy. الدرس 12 من 36.

سؤال واحد لا يُعدّ اختبارًا. بعد أن تجيب، ينبغي أن ينقلك زر «التالي» إلى السؤال التالي، وينبغي أن يوضّح سطر في الأعلى موضعك.

الانتقال إلى السؤال التالي يتطلب تغييرين في setState واحد: يزداد الفهرس، وتُنسى الإجابة، حتى يبدأ السؤال الجديد بلا ألوان:

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

لا يكون الزر منطقيًا إلا بعد أن تجيب، وليس عند السؤال الأخير، إذ لا يوجد سؤال تالٍ (ستأتي شاشة النتائج لاحقًا). يضيف if الخاص بالمجموعة الزر عندها فقط: if (_answered && !_isLast) FilledButton(...).

يبدأ الناس العدّ من 1، أما القوائم فتبدأ من 0. يعرض النص التسمية _index + 1: 'Question ${_index + 1} of ${questions.length}'. يتيح لك الشكل ${...} وضع تعبير كامل داخل سلسلة نصية، وليس اسمًا فقط.

التحدي

متوسط

تنقّل بين الأسئلة:

أضف أداة getter باسم _isLast تكون قيمتها true عند السؤال الأخير، وأضف الطريقة _next من الشرح النظري
اعرض فوق السؤال Question 1 of 5 (باستخدام الأرقام الفعلية) بنمط labelLarge الخاص بالسمات، ثم أضف مسافة مقدارها 24 بكسل
أسفل الإجابات، بعد الإجابة عن السؤال، إذا لم يكن السؤال هو الأخير، اعرض زر FilledButton بعنوان Next يستدعي _next

جرّب بنفسك

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