عمل انميشن في عرض عناصر التطبيق الخاص بك في flutter بسهوله

عمل انميشن في عرض عناصر التطبيق الخاص بك في flutter بسهوله

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

هل يمكنك التفكير في شخص يقوم بإجراء مكالمات على هاتفه فقط؟ في الواقع ، تطورت الهواتف الذكية منذ فترة طويلة إلى أجهزة يمكنها القيام بأكثر من مجرد إجراء مكالمات.

في الوقت الحاضر ، يمكن للمستهلكين استخدام التطبيقات على هواتفهم لتنفيذ مجموعة متنوعة من المهام اليومية. بالإضافة إلى ذلك ، هناك عدد متزايد من تطبيقات الهاتف المحمول. وفقًا لـ Statista ، يمكن الوصول حاليًا إلى ما يقرب من 3.5 مليون تطبيق لنظام Android و 2.2 مليون لنظام iOS.

تواصل الشركات تطوير حلول مبتكرة للهاتف المحمول على الرغم من وفرة التطبيقات في السوق في محاولة لتكون مرئية وذات صلة. يعد تطوير تطبيقات الهاتف المحمول الأصلية إحدى الطرق العديدة لتحقيق ذلك. 

add package :

animate_do: ^2.1.0

How to Add animation between items in Flutter project

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

ui.dart

@override
  Widget build(BuildContext context) {
    var he =  MediaQuery.of(context).size.height;
    var we =  MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: EdgeInsets.only(right: MediaQuery.of(context).size.width * 0.38),
              child: FadeInLeft(
                delay: const Duration(milliseconds: 550),
                child: Text("Explore new \nrelease movies..",style:
                TextStyle(color: Colors.white,fontSize: 25),),
              ),
            ),
            SizedBox(height: 20,),
            SizedBox(
              width: we * 1,
              height: he * 0.12,
              child: ListView.builder(
                physics: const BouncingScrollPhysics(),
                itemBuilder: (c, i) {
                  return FadeInRight(
                    delay: const Duration(milliseconds: 350),
                    child: Container(
                      margin: const EdgeInsets.only(left: 30),
                      width: we * 0.63,
                      height: he * 0.3,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                          color: const Color(0xff202032)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(20),
                              child: Container(
                                width: 80,
                                height: 80,
                                decoration: BoxDecoration(
                                    borderRadius:
                                    BorderRadius.circular(20)),
                                child: Image.network(
                                  listModel[i].photo,fit: BoxFit.cover,),
                              ),
                            ),
                          ),
                          Column(
                            mainAxisAlignment:
                            MainAxisAlignment.center,
                            crossAxisAlignment:
                            CrossAxisAlignment.start,
                            children: [
                              Text(listModel[i].name,
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: listModel[i]
                                          .name
                                          .length >=
                                          19
                                          ? 10
                                          : 13)),
                              const SizedBox(
                                height: 12,
                              ),
                              Text(listModel[i].name,
                                  style: const TextStyle(
                                      color: Colors.grey)),
                            ],
                          ),
                          Expanded(
                            child: SizedBox(
                              width: we * 0.06,
                            ),
                          ),
                          Container(
                            width: 50,
                            height: 50,
                            decoration: const BoxDecoration(
                                color: Color(0xFF733FF1),
                                shape: BoxShape.circle),
                            child: const Icon(
                              Icons.play_arrow,
                              color: Colors.white,
                              size: 30,
                            ),
                          ),
                          SizedBox(
                            width: we * 0.02,
                          )
                        ],
                      ),
                    ),
                  );
                },
                scrollDirection: Axis.horizontal,
                itemCount: listModel.length,
              ),
            ),
          ]
    ),
        ),
    )
  }