Menu
CoddyTech

חידון: השאלה הבאה

חלק מהיחידה פרויקטים במסלול ה-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}'. הצורה ${...} מאפשרת להכניס מחרוזת ביטוי שלם, ולא רק שם.

challenge icon

אתגר

בינוני

התקדם בין השאלות:

  • הוסף 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]),
                ),
              ),
          ],
        ),
      ),
    );
  }
}
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה פרויקטים

תרגלו בעצמכם: קומפיילר Flutter אונליין