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

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

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

add package:

flutter_styled_toast: ^2.1.3

How to show snackbar in Flutter

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

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);
              },
            ),
          ]
        ),
      ),
    );
  }
}