شرح كيفية عمل انميشن للContainer وسحبه الى الخلف في فلاتر

Ahmed Mahmoud

اخر تحديث :

شرح كيفية عمل انميشن للContainer وسحبه الى الخلف في فلاتر

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

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

تم تغيير ذلك بواسطة Flutter ، إطار عمل مفتوح المصدر أنشأته Google. Ionic و React Native و Xamarin ليست سوى عدد قليل من الحلول المتاحة للمطورين اليوم لبناء تطبيقات محمولة سريعة تعمل عبر منصات مختلفة. لا تزال Dart ، لغة البرمجة المدمجة في Flutter ، محبوبة ومستخدمة جيدًا.

بالإضافة إلى تطبيقات Android المكتبية الأولية ، فإن Flutter 3 ، الذي تم تقديمه في وقت سابق من هذا العام ، يدعم أيضًا تطبيقات سطح المكتب لنظامي التشغيل MacOS و Linux.

add pubspec.yaml

dependencies:
flutter_cool_card_swiper: ^0.0.4

How to Change position Container after click with animation in Flutter

بعد تثبيت المكتبة سوف تستطيع استخدام الwidget وهو CoolSwiper وبداخله سوف نقوم بعمل توليد لمجموعة من الcontainer والعدد سوف يكون بنفس العدد الذي يحمل الlist التي بإسم color والموجوده في Data class وبعدها سوف نقوم بعمل التصميم الذي نرغب به كما هو موضح كل شكل سوف يكون بلون معين وجميعهم نفس الشكل , يمكنك اي تصميم ترغب به بكل سهوله والامر بسيط جدا

ui.dart

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body:Center(
        child: CoolSwiper(
          children: List.generate(
            Data.colors.length,
                (index) => Container(
              height: Constants.cardHeight,
              padding: const EdgeInsets.all(40),
              decoration: BoxDecoration(
                color: Data.colors[index],
                borderRadius: BorderRadius.circular(18),
              ),
              child: Align(
                alignment: Alignment.bottomLeft,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      height: 40,
                      width: 40,
                      decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.2),
                        shape: BoxShape.circle,
                      ),
                    ),
                    const SizedBox(width: 10),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          height: 15,
                          width: 150,
                          decoration: BoxDecoration(
                            color: Colors.black.withOpacity(0.2),
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                        const SizedBox(height: 10),
                        Container(
                          height: 15,
                          width: 100,
                          decoration: BoxDecoration(
                            color: Colors.black.withOpacity(0.2),
                            borderRadius: BorderRadius.circular(10),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        ),),
    );
  }

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