تعتبر شاشات تعريف التطبيق أداة قوية لاستعراض ميزات تطبيقك وتوجيه المستخدمين في استخدامه بشكل صحيح.حزمة introduction_screen
هي واحدة من أفضل حزم Flutter المتاحة لإنشاء شاشات التعريف. سنستكشف في هذا المقال مجموعة من خصائص هذه الحزمة المميزة وكيفية استخدامها في تطبيقات Flutter.
1.تثبيت حزمة introduction_screen
قبل البدء في استخدام حزمة introduction_screen، يجب تثبيتها في مشروع Flutter الخاص بك. يمكنك فعل ذلك بإضافة التالي إلى ملف pubspec.yaml
الخاص بالمشروع:
dependencies: introduction_screen: ^3.1.12
2.إنشاء شاشة تعريف جديدة
بعد تثبيت الحزمة، يمكنك البدء في إنشاء شاشة تعريف جديدة. قم بإنشاء ملف جديد واستيراد الحزمة:
import 'package:flutter/material.dart'; import 'package:introduction_screen/introduction_screen.dart';
3.إضافة الشرائح (Slides)
تعتمد حزمة introduction_screen على استخدام الشرائح لعرض محتوى التعريف بالتطبيق. يمكنك إضافة الشرائح باستخدام IntroductionScreen
و PageViewModel
. لنفترض أن لديك 3 شرائح:
final List<PageViewModel> slides = [ PageViewModel( title: "مرحبًا بك", body: "اكتشف ميزات التطبيق الرائعة", image: Image.asset('assets/slide1.png'), decoration: const PageDecoration( pageColor: Colors.blue, ), ), PageViewModel( title: "سهولة الاستخدام", body: "تجربة مستخدم بسيطة وسلسة", image: Image.asset('assets/slide2.png'), decoration: const PageDecoration( pageColor: Colors.red, ), ), PageViewModel( title: "ابدأ الآن", body: "استمتع بتجربة فريدة ومميزة", image: Image.asset('assets/slide3.png'), decoration: const PageDecoration( pageColor: Colors.green, ), ), ];
4.عرض شاشة تعريف التطبيق
الآن بعد إضافة الشرائح، يمكنك عرض شاشة التعريف باستخدام IntroductionScreen
:
class IntroScreen extends StatelessWidget { @override Widget build(BuildContext context) { return IntroductionScreen( pages: slides, done: const Text('تم'), onDone: () { // تنفيذ الإجراء المطلوب عند الانتهاء }, showNextButton: false, showSkipButton: true, skip: const Text('تخطي'), onSkip: () { // تنفيذ الإجراء المطلوب عند الضغط على "تخطي" }, ); } }
5.تشغيل شاشة تعريف التطبيق
لتشغيل شاشة التعريف، يمكنك استخدام MaterialApp
وتعيين home
إلى IntroScreen
:
void main() { runApp(MaterialApp( home: IntroScreen(), )); }
تتيح حزمة introduction_screen لمطوري Flutter إضافة شاشات تعريف متميزة وجذابة إلى تطبيقاتهم بسهولة. في هذا المقال، شرحنا كيفية تثبيت الحزمة، إنشاء شاشة تعريف جديدة، إضافة الشرائح، وعرض شاشة التعريف. قم بتجربة الحزمة واستكشاف المزيد من خصائصها لتحسين تجربة المستخدم في تطبيقاتك.
لاحظ أن الأكواد المذكورة أعلاه هي أمثلة لتوضيح الاستخدام وقد تحتاج إلى تعديلها وفقًا لمتطلبات تطبيقك الفعلية وتصميمه.
مرحبا
شكرا لك على هذا الشرح المبسط
أحاول عمل شاشة تعريفية و استخدام background image لكامل الشاشة و لكن أرغب كذلك بضافة تأثير لون linear gradient على صورة الخلفية
كيف يمكن ذلك؟
PageViewModel(
title: ‘Page One’,
body: ‘body’,
image: Image.asset(
‘assets/images/intro_1.png’,
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity,
),
decoration: const PageDecoration(
fullScreen: true,
),
),
تواصل معنا على الايميل أو واتساب