شرح عمل animation على العناصر في Flutter بابسط طريقة

شرح عمل animation على العناصر في Flutter بابسط طريقة


شرح عمل animation على العناصر في Flutter بابسط طريقة

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


نظام تشغيل الأجهزة المحمولة ، الذي يُعرف أحيانًا باسم نظام تشغيل الهاتف المحمول ، هو عبارة عن منصة برمجية تتيح تشغيل التطبيقات الأخرى على الأجهزة المحمولة ، على غرار أنظمة تشغيل Linux أو Windows التي تحكم سطح المكتب أو الكمبيوتر المحمول. تم إنشاء هذه المنصة خصيصًا للهواتف المحمولة والهواتف الذكية وأجهزة المساعد الرقمي الشخصي وأجهزة الكمبيوتر اللوحية والأجهزة المحمولة الأخرى.


يتم تحديد كل من Thumbwheels ، ولوحات المفاتيح ، و WAP ، والمزامنة مع البرامج ، والبريد الإلكتروني ، والرسائل النصية ، والوظائف والميزات الأخرى بواسطة نظام التشغيل. يعد إنشاء تطبيق جوال مهمة صعبة وتستغرق وقتًا طويلاً. هناك العديد من أنظمة التشغيل المختلفة ، ولكل نظام أساسه الخاص لإنشاء تطبيقات الأجهزة المحمولة. يتم كتابة إطار العمل الأصلي لنظام Android بلغة Java ، بينما تتم كتابة إطار العمل الأصلي لنظام iOS بلغة Swift.


تغيير احجام العناصر والنصوص عمل عمل animation خلال عملية التغيير في flutter 

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


تغيير احجام العناصر والنصوص عمل عمل animation خلال عملية التغيير في flutter

animation.dart


class GG extends StatefulWidget {
  const GG({Key? key}) : super(key: key);

  @override
  _GGState createState() => _GGState();
}

class _GGState extends State<GG> {
  bool isLower = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Test App'),
        ),
        body: Center(
          child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // Container with Animation
                  AnimatedContainer(
                    duration: const Duration(seconds: 1),
                    height: isLower ? 150.0 : 200.0,
                    width: isLower ? 150.0 : 200.0,
                    // style Animation
                    curve: Curves.decelerate,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(isLower ? 5.0 : 50.0),
                      color: isLower ? Colors.blue : Colors.green,
                    ),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  // Text with Animation
                  AnimatedDefaultTextStyle(
                    child: const Text(
                      'GeeCoders',
                    ),
                    style: TextStyle(
                        color: isLower ? Colors.blue : Colors.green,
                        fontSize: 20,
                        fontWeight: FontWeight.bold),
                    duration: const Duration(seconds: 1),
                  ),
                  MaterialButton(
                    onPressed: () {
                      setState(() {
                        isLower = !isLower;
                      });
                    },
                    color: const Color(0xFFFFD452),
                    shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(10.0) ),
                    child: const Text('Click Here' , style: TextStyle(
                        color: Colors.black54)),
                  )
                ],
              )),
        ));
  }
}


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

  1. حل مشكلة minCompileSdk (31) specified in a dependency's AAR
  2. عمل مؤشر لتتبع الخطوات في فلاتر | flutter stepper
  3.  كود منع تدوير الشاشه في التطبيقات بإستخدام فلاتر
  4.  شرح كيفية عمل post للبيانات من نوع params داخل الapi في flutter
  5. شرح كيفية استخدام الapi مع repostery في Flutter وتنظيم الكود

تعليقات