By using this site, you agree to the Privacy Policy and Terms of Use.
موافق
عرب فلاترعرب فلاتر
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
قراءة: شرح استخدام FlutterToast في Flutter
شارك
تسجيل الدخول
إشعار أظهر المزيد
Aa
عرب فلاترعرب فلاتر
Aa
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
Search

أقسام الموقع

استكشف جميع أقسام الموقع
قسم Dart في موقع عرب فلاتر

Dart

59 مقالات
قسم Widgets في موقع عرب فلاتر

Widgets

104 مقالات
قسم Packages في موقع عرب فلاتر

Packages

19 مقالات
قسم Tutorials في موقع عرب فلاتر

Tutorials

22 مقالات

أخر المواضيع

استكشف أخر المواضيع المنشورة
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا

5
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials

حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر

10
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials

أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات

17
لديك حساب موجود؟ تسجيل الدخول
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
عرب فلاتر > Packages > شرح استخدام FlutterToast في Flutter
Packages

شرح استخدام FlutterToast في Flutter

عبدالله يوسف
أخر تحديث 2024/11/15
بواسطة عبدالله يوسف اضف تعليق 5 دقيقة للقراءة 3912 مشاهدات 8
شارك
شرح استخدام FlutterToast في Flutter
شرح استخدام FlutterToast في Flutter
شارك

خدماتنا البرمجية – عرب فلاتر🚀

خدماتنا البرمجية – عرب فلاتر

تعد باكج FlutterToast أداة ممتازة لإضافة إشعارات البوب-أب في تطبيقات فلاتر. عندما يتعلق الأمر بتطوير تطبيقات الهواتف المحمولة، فإن إشعارات البوب-أب تلعب دورًا حيويًا في تعزيز تجربة المستخدم وتوفير معلومات مهمة وتنبيهات فورية. إذا كنت تهتم بتطوير تطبيقات بواسطة Flutter وترغب في إضافة إشعارات البوب-أب المخصصة لتطبيقك، فقد وصلت إلى المكان الصحيح.

المحتويات
تثبيت باكج FlutterToast في مشروع فلاترعرض الإشعارات الأساسية باستخدام FlutterToastتخصيص الإشعارات باستخدام FlutterToastإضافة إجراءات النقر على الإشعار باستخدام FlutterToastالتحكم في موقع ظهور الإشعار باستخدام FlutterToast

في هذا المقال، سنستكشف كيفية تخصيص وإضافة إشعارات البوب-أب باستخدام FlutterToast لتوفير إشعارات البوب-أب في تطبيقات Flutter. سنتعلم كيفية تغيير لون الخلفية ولون النص وحجم الخط، وكذلك كيفية إضافة إجراءات النقر والتحكم في موقع ظهور الإشعارات. بعد قراءة هذا المقال، ستكون لديك المعرفة اللازمة لتجربة إشعارات البوب-أب المخصصة وتحسين تجربة مستخدمي تطبيقك. فلنبدأ في استكشاف هذه العملية المثيرة لتطوير تطبيقات Flutter الرائعة!


تثبيت باكج FlutterToast في مشروع فلاتر

لتثبيت باكج FlutterToast وإضافته إلى مشروع فلاتر، يمكنك اتباع الخطوات التالية:

  1. قم بفتح ملف pubspec.yaml في مشروعك.
  2. في قسم dependencies، أضف السطر التالي:
   fluttertoast: ^x.x.x

حيث x.x.x يمثل إصدار الباكج الذي ترغب في استخدامه. يمكنك التحقق من أحدث إصدار على موقع الباكج في pub.dev.

  1. قم بتشغيل الأمر التالي في وحدة التحكم (Terminal) لتحديث الاعتماديات:
   flutter pub get

بعد تثبيت الباكج، يمكنك استخدامه لإنشاء إشعارات البوب-أب بأسلوب سهل ومرن. سنستعرض الآن بعض الأكواد لتوضيح كيفية استخدام FlutterToast.

“اقرأ أيضاً: شرح استخدام ويدجت IgnorePointer في فلاتر“


عرض الإشعارات الأساسية باستخدام FlutterToast

في هذا القسم، سنقوم بإنشاء إشعار بسيط يظهر لمدة قصيرة ثم يختفي. سيتم شرح الأكواد المستخدمة في إنشاء الإشعار وتخصيصه.

import 'package:fluttertoast/fluttertoast.dart';
import 'package:flutter/material.dart';

// دالة لعرض الإشعار
void showToast() {
  Fluttertoast.showToast(
    msg: 'مرحبًا، هذا إشعار بوب-أب!',
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.BOTTOM,
    backgroundColor: Colors.black,
    textColor: Colors.white,
    fontSize: 16.0,
  );
}

// دالة البناء الأساسية للتطبيق
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('مثال على إشعار بوب-أب'),
      ),
      body: const Center(
        child: ElevatedButton(
          onPressed: showToast,
          child: Text('إظهار الإشعار'),
        ),
      ),
    ),
  ));
}

في هذا المثال، قمنا بتضمين باكج FlutterToast واستدعاء دالة showToast() لعرض الإشعار. عند النقر على زر “إظهار الإشعار”، سيتم عرض الإشعار أسفل الشاشة لمدة قصيرة ثم يختفي. لقد قمنا أيضًا بتخصيص الإشعار بلون الخلفية ولون النص وحجم الخط.

“اقرأ أيضاً: شرح استخدام TabBar و TabBarView في فلاتر“


تخصيص الإشعارات باستخدام FlutterToast

في هذا القسم، سنتعرف على كيفية تخصيص إشعارات البوب-أب باستخدام باكج FlutterToast.

void showToast() {
  Fluttertoast.showToast(
    msg: 'مرحبًا، هذا إشعار بوب-أب!',
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.BOTTOM,
    backgroundColor: Colors.black,
    textColor: Colors.white,
    fontSize: 16.0,
  );
}

نستطيع تغيير لون الخلفية باستخدام backgroundColor وتغيير لون النص باستخدام textColor. يمكننا أيضًا تعديل حجم الخط باستخدام fontSize.

“اقرأ أيضاً: شرح استخدام ويدجت TextFormField في فلاتر“


إضافة إجراءات النقر على الإشعار باستخدام FlutterToast

يمكننا تعريف إجراءات مخصصة للنقر على الإشعارات وربطها بعناصر وظيفية في التطبيق.

void showToast() {
  Fluttertoast.showToast(
    msg: 'مرحبًا، هذا إشعار بوب-أب!',
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.BOTTOM,
    backgroundColor: Colors.black,
    textColor: Colors.white,
    fontSize: 16.0,
  ).then((value) {
    // تنفيذ الإجراء بعد النقر على الإشعار
    // يمكنك هنا تحديد الإجراء المراد تنفيذه، مثل التنقل إلى صفحة جديدة أو تحديث البيانات.
  });
}

باستخدام then، يمكننا تعريف الإجراء الذي يتم تنفيذه بعد النقر على الإشعار. يمكنك هنا تحديد الإجراء المراد تنفيذه، مثل التنقل إلى صفحة جديدة أو تحديث البيانات.

“اقرأ أيضاً: شرح استخدام ويدجت CircleAvatar في فلاتر“


التحكم في موقع ظهور الإشعار باستخدام FlutterToast

يمكننا تغيير موقع ظهور الإشعار من الأعلى أو الأسفل باستخدام gravity.

void showToast() {
  Fluttertoast.showToast(
    msg: 'مرحبًا، هذا إشعار بوب-أب!',
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.TOP,
    backgroundColor: Colors.black,
    textColor: Colors.white,
    fontSize: 16.0,
  );
}

يمكننا تحديد موقع مخصص لظهور الإشعار باستخدام gravity، مثل ToastGravity.TOP للظهور في الأعلى أو ToastGravity.CENTER للظهور في الوسط.

“اقرأ أيضاً: شرح استخدام ويدجت ClipOval في فلاتر“


بهذا نكون قد استعرضنا استخدام باكج FlutterToast في إضافة إشعارات البوب-أب في تطبيقات فلاتر. يمكنك استكشاف المزيد من الخيارات والتخصيصات المتاحة في الباكج لتلبية احتياجات تطبيقك الخاص وتحسين تجربة المستخدم.

Arab Flutter Community 🚀

انضم إلى مجتمع Arab Flutter
شارك هذا المقال
فيسبوك تويتر Whatsapp Whatsapp لينكد ان تلغرام نسخ الرابط
Avatar of عبدالله يوسف
بواسطة عبدالله يوسف Founder and CEO at ArabFlutter
تابع:
أنا عبدالله يوسف، مهندس مصري ومؤسس موقع عرب فلاتر، ملهم بشغف التكنولوجيا والإبداع. كمصمم مواقع ومبرمج تطبيقات موبايل باستخدام Flutter، أستمتع بخلق عوالم رقمية فريدة ومبتكرة. تتجلى مواهبي في تصميم وتطوير واجهات مستخدم تفاعلية، حيث يمزج الجانب الجمالي بالدقة الهندسية. ما يميزني هو إلمامي الواسع بتقنيات البرمجة والتصميم، ومقدرتي على تطوير تطبيقات متنوعة عبر منصات مختلفة. أعتبر نفسي مبدعًا وملتزمًا، حيث أسعى دائمًا لتحقيق تحسين مستمر في مهاراتي وتقنياتي. أستمتع بتحديات العمل الجماعي وأؤمن بأهمية الابتكار والتطور. بفضل إبداعي والتزامي، أسعى لتقديم حلول فعّالة تلبي توقعات العملاء وتفوق عن المألوف.
اترك تعليقا اترك تعليقا

اترك تعليقاً إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials
طريقة انشاء المجلدات باستخدام Dart
طريقة انشاء المجلدات باستخدام كود Dart تلقائيًا
Tutorials

مقالات ذات الصلة

اطلع على المزيد من المقالات المتعلقة بهذا الموضوع!
شرح استخدام حزمة GDPR Admob في Flutter
Packages

شرح استخدام حزمة GDPR Admob في فلاتر 2024

10 1
شرح استخدام حزمة Permission Handler في Flutter
Packages

شرح استخدام حزمة Permission Handler في Flutter

9 1
شرح استخدام حزمة QuickAlert في Flutter
Packages

شرح استخدام حزمة QuickAlert في Flutter

6
شرح استخدام Cached Network Image في Flutter
Packages

شرح استخدام Cached Network Image في Flutter

3
شرح استخدام حزمة Device Preview في Flutter
Packages

شرح استخدام حزمة Device Preview في Flutter

4
شرح استخدام flutter_launcher_icons في Flutter
Packages

شرح استخدام flutter_launcher_icons في Flutter

4
أظهر المزيد
شعار موقع عرب فلاتر شعار موقع عرب فلاتر

About US

Quick Links

  • خدماتنا
  • من نحن
  • اتصل بنا
  • اتفاقية استخدام
  • سياسة الخصوصية
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
adbanner
تم اكتشاف مانع إعلانات
مرحبًا، يرجى إيقاف مانع الإعلانات. الإعلانات تُساهم في دعم موقعنا وتغطية جزء من تكاليف الاستضافة وتطوير المحتوى. شكرًا لتفهمك ودعمك.
Okay, I'll Whitelist
Welcome Back!

Sign in to your account

هل نسيت كلمة المرور؟