إنشاء لعبة بطاقة خدش في Flutter للكشف عن الجوائز باستخدام Flutter
في عالم التطبيقات التفاعلية، يبحث المستخدمون دائمًا عن تجارب ممتعة وجذابة. من أكثر الأفكار انتشارًا في تطبيقات المكافآت والألعاب هي بطاقة الخدش (Scratch Card)، والتي تتيح للمستخدم “خدش” البطاقة للكشف عن جائزة مخفية.
في هذا الدليل العملي، سنتعلم كيفية إنشاء بطاقة خدش احترافية باستخدام Flutter ولغة Dart مع شرح كامل للكود خطوة بخطوة.
ما هو Flutter ولماذا نستخدمه؟
إعداد المشروع
https://flutter.dev
ثم قم بإنشاء مشروع جديد عبر الأمر:
flutter create scratch_card_app
cd scratch_card_app
إضافة مكتبة Scratcher
dependencies:
scratcher: ^2.0.0
flutter pub get
تصميم بطاقة خدش بسيطة
import 'package:flutter/material.dart';
import 'package:scratcher/scratcher.dart';
class ScratchCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('بطاقة الخدش'),
),
body: Center(
child: Scratcher(
brushSize: 50,
threshold: 50,
color: Colors.grey,
onChange: (value) => print("خدش ${value.toStringAsFixed(2)}%"),
onThreshold: () => print("تم الكشف عن الجائزة!"),
child: Container(
width: 300,
height: 300,
color: Colors.blue,
child: Center(
child: Text(
"مبروك! لقد ربحت جائزة!",
style: TextStyle(color: Colors.white, fontSize: 24),
textAlign: TextAlign.center,
),
),
),
),
),
);
}
}
شرح الكود
هو العنصر الأساسي الذي يوفر تأثير الخدش التفاعلي.
brushSize:
يحدد حجم الفرشاة المستخدمة أثناء الكشط.
threshold:
النسبة المئوية المطلوبة للكشف الكامل عن الجائزة.
onChange:
يتم استدعاؤها أثناء عملية الخدش لمعرفة نسبة التقدم.
onThreshold:
يتم تنفيذها عند الوصول إلى نسبة الخدش المحددة.
مثال احترافي: عرض الجائزة داخل Dialog مع BottomSheet
Scratcher(
brushSize: 30,
threshold: 30,
color: Colors.green,
image: Image.asset('assets/sc.png'),
onChange: (value) {
if (value >= 70) {
_bottom();
}
debugPrint("Scratch progress: $value%");
},
onThreshold: () =>
debugPrint("Threshold reached, you won!"),
child: Container(
height: 300,
width: 300,
color: Colors.white,
child: Center(
child: Text(
'You Won ₹ 500',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
),
),
),
),
)
أفضل ممارسات عند إنشاء بطاقة خدش
تطوير الفكرة لمستوى احترافي
الكود المصدر الكامل
رابط الكود المصدر
الخلاصة
إذا كنت تطور تطبيق ألعاب أو مكافآت أو متجر إلكتروني، فإن إضافة ميزة بطاقة الخدش ستزيد من تفاعل المستخدمين بشكل كبير.
Flutter يجعل بناء مثل هذه التجارب أمرًا ممتعًا وسريعًا.
واذا كنت ترغب بمزيد من التصاميم في فلاتر يمكنك مشاهده المقاله التاليه : تنفيذ Flutter Parallax Effect في تطبيقات Flutter لتحسين تجربة المستخدم
