اضافة toast لتطبيقك وكيفية التعامل معه داخل ملف components
في تطوير تطبيقات الجوال عموما عليك دائما بأن توفر للمستخدم كل ما يحتاجه وتحسن من شكل تطبيقك بإستمرار من وضع انميشن وتحسين الالوان لان كل هذا يترك طابع لدى مستخدمي التطبيق وفي هذا المقال سوف نتعرف على طريقة إظهار toast يظهر للمستخدم عند حدوث اي عملية لتظهر رسالة في الاسفل تخبره بالذي حدث , وايضا سوف نتعرف على كيفية اضافة ال toast داخل الcomponents لكي نتمكن من استدعائها في اي مكان والتعامل معها بدون مشاكل .
افترض أنك قمت بإصدار تطبيق Android يكتسب شعبية يومًا بعد يوم. يتزايد الطلب على إصدار إصدار iOS. كما يطلب بعض المستخدمين إصدارًا خفيفًا عبر الإنترنت من البرنامج. الوقت متاح بالنسبة لك ، لكنك تفتقر إلى الأموال اللازمة لتوظيف مطور والوقت لتعلم لغة جديدة تمامًا ، ناهيك عن إطلاق تطبيق جاهز للإنتاج.
هذا هو المكان الذي يبدأ فيه مفهوم تطوير البرامج عبر الأنظمة الأساسية. يتيح لك تطوير التطبيقات عبر الأنظمة الأساسية إنشاء تطبيق يعمل على العديد من الأنظمة الأساسية باستخدام نفس قاعدة التعليمات البرمجية. يمكن بسهولة نقل الكود المستخدم لإنشاء تطبيق Android إلى iOS أو الويب أو برنامج سطح مكتب. وهذا يلغي أيضًا الحاجة إلى الاحتفاظ بقاعدة بيانات منفصلة. أليس هذا رائعا؟
تعد Flutter و React Native و PhoneGap و Ionic و Xamarin بعضًا من أدوات تطوير التطبيقات عبر الأنظمة الأساسية الموجودة حاليًا في السوق.
اضافة مكنبة toast الى flutter مع دعم Null Safety
قم اولا بإضافة المكتبة التالية في المكان المخصص , ويمكنك استعمال الكود التالي في اظهار شكل الاشعار الذي يظهر بالاسفل .
fluttertoast: ^8.0.8اضافة toast داخل components
الان نريد وضع الtoast بداخل ملف components لكي نتمكن من استعماله في المرات المقبلة بدون كتابة الكود بشكل كامل , سوف تقوم بكتابة الكود كما هو موضح ولكن هنا الان يختلف قليلا وذلك بسبب اختيار اللون ولهذا تحتاج الى عمل enum وتضع به الحالات التي تريدها واسفلها methode اخرى للالوان مثلا اذا نجحت العملية تكون خضراء وفشلت حمراء وبه مشكلة صفراء ويمكنك تخصيص الحالات كما ترغب , وفي النهايه تستطيع استخدام هذا الcomponent في ملف dart الخاص بالتصميم وعرض الرساله من داخله .
void showToast({
required String message,
required ToastStates toastStates,
}) =>
Fluttertoast.showToast(
msg: message,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 5,
backgroundColor: choseToastColor(toastStates),
textColor: Colors.white,
fontSize: 16.0);
enum ToastStates { SUCCESS, ERROR, WARNING }
Color choseToastColor(ToastStates toastStates) {
Color color;
switch (toastStates) {
case ToastStates.SUCCESS:
color = Colors.green;
break;
case ToastStates.WARNING:
color = Colors.amber;
break;
case ToastStates.ERROR:
color = Colors.red;
break;
}
return color;
}
لمزيد من شروحات تطوير تطبيقات الجوال يمكنك زيادة القسم المختص في الموقع
