الاختبار القصير: السؤال
جزء من قسم المشاريع في رحلة 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 يجعل العمود كل عنصر فرعي بعرضه الكامل، فتَصطف الأزرار الأربعة جنبًا إلى جنب.
التحدي
سهلاعرض السؤال الأول:
- أضف
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'),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس المشاريع
تدرّب بنفسك: مترجم Flutter عبر الإنترنت