تصميم لعبة أسئلة تفاعلية باستخدام Flutter
Flutter هو إطار عمل قوي لتطوير التطبيقات عبر الأنظمة الأساسية (Android وiOS) باستخدام لغة Dart. في هذا المقال، سنشرح خطوة بخطوة كيفية تصميم لعبة أسئلة تفاعلية يمكن استخدامها في تطبيقات تعليمية أو ترفيهية.
الخطوة الأولى: إعداد المشروع
ابدأ بإنشاء مشروع Flutter جديد باستخدام الأمر التالي في واجهة الأوامر:
flutter create quiz_game
ثم انتقل إلى مجلد المشروع:
cd quiz_game
افتح المشروع في محرر النصوص المفضل لديك (مثل VS Code).
الخطوة الثانية: إعداد الهيكل الأساسي
افتح ملف lib/main.dart وقم بإنشاء الهيكل الأساسي لتطبيق اللعبة:
import 'package:flutter/material.dart';
void main() {
runApp(QuizGame());
}
class QuizGame extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: QuizHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class QuizHomePage extends StatefulWidget {
@override
_QuizHomePageState createState() => _QuizHomePageState();
}
class _QuizHomePageState extends State<QuizHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('لعبة الأسئلة'),
centerTitle: true,
),
body: Center(
child: Text('مرحبًا بكم في لعبة الأسئلة!'),
),
);
}
}
الخطوة الثالثة: إضافة قائمة الأسئلة
قم بإنشاء قائمة بالأسئلة والإجابات:
class Question {
final String questionText;
final List<String> options;
final int correctAnswerIndex;
Question(this.questionText, this.options, this.correctAnswerIndex);
}
List<Question> questions = [
Question(
'ما هي عاصمة فرنسا؟',
['باريس', 'مدريد', 'لندن', 'روما'],
0,
),
Question(
'ما هي أكبر قارة في العالم؟',
['آسيا', 'أفريقيا', 'أوروبا', 'أمريكا الشمالية'],
0,
),
];
الخطوة الرابعة: عرض الأسئلة
قم بتحديث واجهة المستخدم لعرض الأسئلة:
class _QuizHomePageState extends State<QuizHomePage> {
int currentQuestionIndex = 0;
void nextQuestion() {
setState(() {
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('لعبة الأسئلة'),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
questions[currentQuestionIndex].questionText,
style: TextStyle(fontSize: 20),
textAlign: TextAlign.center,
),
SizedBox(height: 20),
...questions[currentQuestionIndex].options.asMap().entries.map(
(entry) {
int index = entry.key;
String option = entry.value;
return ElevatedButton(
onPressed: () {
if (index ==
questions[currentQuestionIndex].correctAnswerIndex) {
print('الإجابة صحيحة!');
} else {
print('الإجابة خاطئة!');
}
nextQuestion();
},
child: Text(option),
);
},
),
],
),
),
);
}
}
الخطوة الخامسة: تحسين الواجهة
قم بإضافة المزيد من التحسينات مثل عداد النقاط أو المؤثرات البصرية عند الإجابة.
الخاتمة
بهذه الخطوات، يمكنك إنشاء لعبة أسئلة تفاعلية باستخدام Flutter. هذا المشروع يُعد بداية رائعة لتطوير تطبيقات تعليمية أو ترفيهية. قم بتطوير اللعبة بإضافة ميزات مثل المؤقت أو الأسئلة المتعددة لتحسين تجربة المستخدم.