Menu
CoddyTech
flag Ar iconالعربيةdown icon

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

جزء من قسم المشاريع في رحلة 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 عبر الإنترنت