شرح Flutter Animated Button لإنشاء زر تفاعلي بتأثير Wave Animation
إذا كنت ترغب في تحسين واجهة المستخدم داخل تطبيق Flutter وجعلها أكثر تفاعلية، فإن إضافة زر متحرك (Animated Button) يعتبر من أفضل الطرق لتحقيق ذلك.
بدلاً من الأزرار التقليدية، يمكنك استخدام تأثيرات حركية مثل Wave Animation لإعطاء إحساس بصري جذاب عند النقر على الزر، مما يحسن تجربة المستخدم بشكل كبير.
في هذا المقال سنتعرف على كيفية إنشاء flutter animated button باستخدام فئة WaveButtonAnimation، مع شرح مفصل للكود وأفضل طرق التخصيص. :contentReference[oaicite:0]{index=0}
ما هو Animated Button في Flutter؟
– تغير الحجم – ظهور موجة – تحريك الحدود – تغيير اللون
هذه التأثيرات تجعل التطبيق يبدو أكثر احترافية وتساعد المستخدم على فهم أن التفاعل تم بنجاح.
ما هي WaveButtonAnimation؟
يتكون هذا الزر من:
– زر رئيسي – حدود متحركة – تأثير موجي عند الضغط
ويمكن تخصيصه بسهولة ليتناسب مع تصميم التطبيق.
المتغيرات الأساسية داخل WaveButtonAnimation
دالة يتم تنفيذها عند الضغط على الزر.
borderRadius
تحديد استدارة الزر.
backgroundColor
لون خلفية الزر.
verticalPadding و horizontalPadding
تحديد المسافات داخل الزر.
duration
مدة الأنيميشن.
curve
شكل الحركة.
waveLength
قوة وتأثير الموجة.
إنشاء AnimationController
_controller = AnimationController(
vsync: this,
duration: widget.duration,
);
AnimationController هو المسؤول عن تشغيل الحركة والتحكم فيها.
تفاعل المستخدم مع الزر
onTapDown: (_) {
_controller.forward();
widget.onPressed();
},
عند الضغط:
– يتم تشغيل الأنيميشن – يتم تنفيذ الوظيفة
إعادة ضبط الأنيميشن
void controllerListener(AnimationStatus status) {
if (status == AnimationStatus.completed) {
_controller.reset();
}
}
بعد انتهاء الحركة يتم إعادة ضبطها لتكون جاهزة للاستخدام مرة أخرى.
إنشاء Animated Border
borderAnimation = Tween<double>(
begin: waveLength,
end: 0,
).animate(curvedAnimation);
هذا الجزء مسؤول عن:
– تقليل عرض الحدود تدريجيًا – إنشاء تأثير موجي
كيف يعمل AnimatedBorderButton؟
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(borderRadius),
border: Border.all(
color: backgroundColor,
width: borderAnimation.value,
),
),
)
يقوم بتحديث شكل الحدود بشكل ديناميكي أثناء الأنيميشن.
طريقة استخدام WaveButtonAnimation
WaveButtonAnimation(
child: Text(
'Wave Button',
style: TextStyle(color: Colors.white),
),
onPressed: () {},
),
أفضل استخدامات Animated Button
نصائح احترافية لتحسين الزر
حتى لا تؤثر على الأداء.
اختر ألوان متناسقة
لتناسب تصميم التطبيق.
لا تبالغ في التأثير
الحركات البسيطة أفضل.
اختبر الأداء
خصوصًا على الأجهزة الضعيفة.
أخطاء شائعة يجب تجنبها
أسئلة شائعة (FAQ)
ليس ضروري، لكنه يحسن تجربة المستخدم بشكل كبير.
هل يؤثر على الأداء؟
لا إذا تم استخدامه بشكل معتدل.
هل يمكن تخصيصه؟
نعم، يمكنك تعديل كل الخصائص بسهولة.
الخلاصة
باستخدام WaveButtonAnimation يمكنك إنشاء زر احترافي يحتوي على تأثيرات موجية جذابة بسهولة.
إذا كنت تريد تحسين تجربة المستخدم وجعل تطبيقك أكثر تميزًا، فإن استخدام الأزرار المتحركة خطوة مهمة تستحق التجربة.
يمكنك الاطلاع على الكود الكامل من هنا: GitHub Repository
لمزيد من المقالات : إنشاء عروض الأشجار التفاعلية باستخدام fancy_tree_view في Flutter
