شارك المقالة

عمل تاثير animation عند اظهار snackbar في Flutter


عمل تاثير animation عند اظهار snackbar في Flutter

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


add package:

flutter_styled_toast: ^2.1.3


How to show snackbar in Flutter

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


How to show snackbar in Flutter

ui.dart


class _GeeCodersState extends State<GeeCoders> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Snack Bar top'),
              onPressed: (){
                showToast('This is normal toast with animation',
                    context: context,
                    animation: StyledToastAnimation.slideFromTop,
                    reverseAnimation: StyledToastAnimation.slideToTop,
                    position: StyledToastPosition.bottom,
                    startOffset: Offset(0.0, -3.0),
                    reverseEndOffset: Offset(0.0, -3.0),
                    duration: Duration(seconds: 4),
                    //Animation duration   animDuration * 2 <= duration
                    animDuration: Duration(seconds: 1),
                    curve: Curves.elasticOut,
                    reverseCurve: Curves.fastOutSlowIn);
              },
            ),
            ElevatedButton(
              child: Text('Snack Bar bottom'),
              onPressed: (){
                showToast('This is normal toast with animation',
                    context: context,
                    animation: StyledToastAnimation.slideFromBottom,
                    reverseAnimation: StyledToastAnimation.slideToBottom,
                    startOffset: Offset(0.0, 3.0),
                    reverseEndOffset: Offset(0.0, 3.0),
                    position: StyledToastPosition.bottom,
                    duration: Duration(seconds: 4),
                    //Animation duration   animDuration * 2 <= duration
                    animDuration: Duration(seconds: 1),
                    curve: Curves.elasticOut,
                    reverseCurve: Curves.fastOutSlowIn);
              },
            ),
            ElevatedButton(
              child: Text('Snack Bar bottom fade'),
              onPressed: (){
                showToast('This is normal toast with animation',
                    context: context,
                    animation: StyledToastAnimation.slideFromBottomFade,
                    reverseAnimation: StyledToastAnimation.slideToBottomFade,
                    startOffset: Offset(0.0, 3.0),
                    reverseEndOffset: Offset(0.0, 3.0),
                    position: const StyledToastPosition(
                      offset: 10.0,
                        align: Alignment.bottomCenter),
                    duration: Duration(seconds: 3),
                    //Animation duration   animDuration * 2 <= duration
                    animDuration: Duration(milliseconds: 400),
                    curve: Curves.linearToEaseOut,
                    reverseCurve: Curves.fastOutSlowIn);
              },
            ),
          ]
        ),
      ),
    );
  }
}


شاهد أيضًا
مقالات ذات صلة
كود برولوج للتاكد من وجود العنصر في list ام لا | Membership Operation prolog program

  في هذا الدرس سوف نقدم لكم كود جديد من اكواد الليست في لغة برولوج…

حل مشكلة عدم القدرة على رفع مشاريع الgithub وظهور مشكلة Invocation failed Unexpected

حل مشكلة عدم القدرة على رفع مشاريع الgithub وظهور مشكلة Invocation failed Unexpected ظهرت في…

شروحات اندرويد ستوديو : شرح انشاء Navigation component والتعامل مع التعامل مع Fragment Graph داخل Android Studio

شرح Navigation component بالعربي داخل برنامج اندرويد ستوديو Android Studio بالعربي في الدروس السابقة من…

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع