تغيير عرض رسائل snackbar في flutter الى اشكال جميله لتحسين مظهر تطبيقك

تغيير عرض رسائل snackbar في flutter الى اشكال جميله لتحسين مظهر تطبيقك

من اكثر الاشياء التي تستخدم في التطبيقات بشكل كبير جدا جدا وهو عنصر toast او ما يعرف لدى البعض باسم snackbar وهو عباره عن شريط يتم ارفاق بداخله بعض التفاصيل او يمكن اعتباره رساله منبثقه تساعدك في توضيح بعض الاشياء للمستخدم العادي في تطبيقك مثل اذا قام بتسجيل الدخول للتطبيق فيمكنك ارفاق رساله تخبره ان العمليه تمت بنجاح او فشلت وقد قدمنا لكم العديد من الاشكال الجميله وما زلنا نقدم لكم الكثير من الاشكال وفي هذه المقالة نقدم لكم انميش جميل جدا يعطي منظر مختلف لتطبيقك مع انميشن عن ظهور العنصر وكل هذا موجود في المكتبة التي نقدمها لكم اليوم .

يُعرف التطبيق الذي تم إنشاؤه خصيصًا لنوع واحد من أنظمة تشغيل الأجهزة المحمولة ، مثل iOS أو Android ، بالتطبيق الأصلي. يتم إنشاء التطبيقات الأصلية باللغة الأصلية لنظام التشغيل ، مثل Java أو Kotlin لتطبيقات Android و Objective-C أو Swift لتطبيقات iOS.

يُشار إلى تطبيق تم إنشاؤه باستخدام تقنيات الويب مثل HTML و CSS وجافا سكريبت باسم تطبيق الويب. Angular أو React أو Vue هي أطر عمل شائعة تستخدم لإنشاء تطبيقات الويب.

نظرًا لجانب الخادم / العميل للتفاعل المستند إلى HTTP ، حيث يجب إرسال كل طلب إلى خادم ويجب على العميل (المتصفح) انتظار استجابة ، قد تكون تطبيقات الويب أقل استجابة من التطبيقات المختلطة.

android sdk manager تحميل flutter developers applications create app android android studio mac

add package :

m_toast: ^0.1.8

How to change snackbar in flutter

يمكنك عمل متغير من نوع ShowMToast واخذ object منه حتى تتمكن من استخدام المكتبة واضافة رسالة خطا او انتظار او حتى نجاح من خلال تغيير المسمى الخاص بالعنصر في الاسفل كما هو موضح بالكود اختر الشكل الذي ترغب به وبعدها ارفق الرساله التي تريد ان تظهر ويمكنك ادراج حتى صور بداخل الرساله في نهايه الامر القرار يرجع لك في الشكل الذي ترغب بعرضه كما هو موضح بالصورة الخاصه بالمقالة في الاعلى .

ui.dart

class _GeeCodersState extends State<GeeCoders> {
  ShowMToast toast = ShowMToast();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Show Snack Bar'),
              onPressed: (){
                toast.successToast(context,
                    message: "Message Sent",
                    // image: "assets/twitter_logo.png",
                    // backgroundColor: Colors.white,
                    alignment: Alignment.bottomCenter,
                    duration: 1500);
              },
            ),
            ElevatedButton(
              child: Text('Erorr Snack Bar'),
              onPressed: (){
                toast.errorToast(context,
                    message: "Error Sent",
                    textColor: Colors.white,
                    image: "assets/img/map/avatar-5.png",
                    backgroundColor: Colors.redAccent.withOpacity(0.7),
                    alignment: Alignment.bottomCenter,
                    duration: 1500);
              },
            ),

          ]
        ),
      ),
    );
  }
}