Menu
CoddyTech

חידון: השאלה

חלק מהיחידה פרויקטים במסלול ה-Flutter של Coddy. שיעור 10 מתוך 36.

האפליקציה השנייה היא חידון על Flutter עצמה: שאלה, ארבע תשובות שאפשר להקיש עליהן, ירוק לתשובה נכונה ואדום לתשובה שגויה, ניקוד ומסך תוצאות.

השאלות כבר נמצאות בקוד ההתחלתי. כל אחת מהן היא Question עם הטקסט שלה, ארבע התשובות שלה והמיקום של התשובה הנכונה:

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

המיקומים מתחילים ב־0, לכן 2 הוא 'Dart'. המצב שומר את _index, השאלה שמוצגת כרגע, ו־questions[_index] היא השאלה הזאת.

התשובות הן אוסף for בתוך Column: כפתור אחד לכל תשובה. FilledButton.tonal הוא כפתור מלא ורך בצבע של ערכת הנושא, שמתאים למבחר אפשרויות. עם crossAxisAlignment: CrossAxisAlignment.stretch העמודה מרחיבה כל ילד לרוחב שלה, כך שכל ארבעת הכפתורים מסתדרים זה לצד זה, מקצה לקצה.

challenge icon

אתגר

קל

הצגת השאלה הראשונה:

  • הוסיפו למצב int _index = 0;
  • החליפו את Center ב־Column עם ריווח של 24 פיקסלים, שמותח את הילדים שלו לרוחב
  • בתוכו: טקסט השאלה בסגנון headlineSmall של ערכת הנושא, רווח של 24 פיקסלים, ואז FilledButton.tonal לכל תשובה, עם ריווח פנימי של 16 פיקסלים ו־12 פיקסלים מתחת לכל אחד מהם

נסו בעצמכם

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

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

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

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