إنشاء صفحة لعرض مجموعه من الاشكال المتحركه في flutter

Ahmed Mahmoud

اخر تحديث :

إنشاء صفحة لعرض مجموعه من الاشكال المتحركه في flutter

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

يمكّنك إطار عمل Flutter مفتوح المصدر من Google من إنشاء تطبيقات متعددة الأنظمة الأساسية ومُصممة محليًا من قاعدة شفرة واحدة. أهداف النظام الأساسي الستة التي يدعمها Flutter 3 هي تطبيقات الويب و Windows و macOS و iOS و Android و iOS.

الإطار المعاصر المستخدم لإنشاء أدوات Flutter تأثر بـ React. تعد أدوات النص ، وتخطيطات الصفوف والأعمدة من Flexbox ، وتخطيطات تحديد المواقع المطلقة المكدسة ، وعناصر واجهة المستخدم الموضوعة ، وعناصر واجهة المستخدم الحاوية هي أكثر الأدوات والتخطيطات شيوعًا ،

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

flutter pub get

dependencies:
metaballs: ^1.4.2

How to create page to show gradient color in Flutter easy

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

ui.dart

Metaballs(
            color: const Color.fromARGB(255, 66, 133, 244),
            effect: MetaballsEffect.follow(
              growthFactor: 1,
              smoothing: 1,
              radius: 0.5,
            ),
            gradient: LinearGradient(
                colors: [
                  const Color.fromARGB(255, 90, 60, 255),
                  const Color.fromARGB(255, 120, 255, 255),
                ],
                begin: Alignment.bottomRight,
                end: Alignment.topLeft
            ),
            metaballs: 40,
            animationDuration: const Duration(milliseconds: 200),
            speedMultiplier: 1,
            bounceStiffness: 3,
            minBallRadius: 15,
            maxBallRadius: 40,
            glowRadius: 0.7,
            glowIntensity: 0.6,
            child: Center(child: Text('GeeCoders'),)
        ),

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