في هذا المقال سوف نشارك معكم كيف تقوم بإنشاء زر 3d في فلاتر , وهذا الزر يكون قابل للنقر عليه كما هو موضح بالصورة الخاصه بالمقال , هذا الزر يعطي لتطبيقك شكل مختلف وجميل وخصوصا اذا كنت تقوم بتطوير المواقع باستخدام flutter فالمواقع تهتم جدا بوجود هذه العناصر بداخلها , يمكنك من خلال المكتبة التي سوف نقدمها لكم تنفيذ الانميشن مع الزر بكل سهوله ولتنفيذه بدون مشاكل اتبع الخطوات التالي لكي لا يحدث اي مشاكل اثناء كتابة الكود الخاصه بك وتنفيذك للزر .

يعد محرك التقديم لمكونات واجهة المستخدم أحد عوامل البيع الرئيسية في Flutter. يمكّن هذا المحرك ، وهو ميزة غير شائعة جدًا في أطر التطبيقات ، Flutter من رسم وعرض مكونات واجهة المستخدم الخاصة به بشكل مستقل عن النظام المستهدف. القليل من الأطر يمكن أن يساوي مستوى التعقيد والتحكم وأداء وقت التشغيل الذي يحققه Flutter نتيجة للقيام بذلك. تتمثل الطريقة التقليدية لتقديم عناصر واجهة المستخدم مع إطار عمل تطبيق في بناء طبقة تجريد أو جسر يستدعي مكتبات واجهة المستخدم الأصلية للنظام ويترجم البيانات بين الاثنين. مع عيب زيادة الحمل في جسر التطبيق الذي يؤثر على الأداء ، فإن هذا يشجع النظام المستهدف على التعامل مع “الرفع الثقيل” لعرض الرسوم المتحركة والمكونات.

package :

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

button.dart

ChoiceChip3D(
            style: ChoiceChip3DStyle.blue,
            height: 60,
            width: 120,// ChoiceChip3DStyle.red, ChoiceChip3DStyle.white
            selected: isSelect,
            onSelected: () {
              setState(()=> isSelect = !isSelect);
            },
            onUnSelected: () {
              setState(()=> isSelect = !isSelect);
            },
            child: Text("My Choice"),
          ),
          

مزيد من المقالات