شارك المقالة

إضافة أيقونة متعددة الخصائص مع أنيميشن باستخدام Flare في Flutter


اضافة ايقونة في Flutter متعددة الخصائص مع انميشن

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


Flutter عبارة عن حزمة SDK أمامية لأنها تجمع بين عناصر واجهة المستخدم ومنطق الأعمال. على الرغم من أن العديد من الأشخاص يدعون أن Dart يُستخدم للواجهة الخلفية ، إلا أن الحقيقة هي أن Flutter هي واجهة أمامية بالكامل وأن Dart تستخدم فقط لمنطق الواجهة الأمامية. لكن تطوير التطبيقات الأصلية لنظامي التشغيل iOS و Android هو “ببساطة” الواجهة الأمامية.

Dart و Java و C / C ++ ولغات البرمجة الأخرى ليست سوى عدد قليل من تلك التي يمكن استخدامها لإنشاء تطبيقات الواجهة الأمامية والخلفية باستخدام Flutter ، وهو SDK عبر الأنظمة الأساسية.

من ناحية أخرى ، Flutter ليست لغة برمجة. إنها مجموعة تطوير برمجيات (SDK) تتضمن كودًا مكتوبًا مسبقًا ، وعناصر واجهة مستخدم جاهزة للاستخدام يمكن تخصيصها ، بالإضافة إلى مكتبات وأدوات ووثائق يمكن استخدامها جميعًا لإنشاء تطبيقات عبر الأنظمة الأساسية. 26 مارس 2021


Add package :

flare_flutter: ^3.0.2


رابط تحميل الايقونة والانميشن


How to create animation clickable in Flutter with Flare

How to create animation clickable in Flutter with Flare

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

ui.dart


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

  @override
  State<AnimationFlutter> createState() => _AnimationFlutterState();
}

class _AnimationFlutterState extends State<AnimationFlutter> {
  bool isActivate = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 102, 18, 222),
      body: Center(child: SmartAnimation(),),
    );
  }
}

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

  @override
  State<SmartAnimation> createState() => _SmartAnimationState();
}

class _SmartAnimationState extends State<SmartAnimation> {
  AnimationToPlay? _lastPlayedAnimation;
  final FlareControls animationControls = FlareControls();

  static const double animationWidth = 295.0;
  static const double animationHeight = 251.0;
  bool isActivate = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: animationWidth,
      height: animationHeight,
      child: GestureDetector(
        onTapUp: (tapInfo) {
          setState(() {


          var localTouchPosition = (context.findRenderObject() as RenderBox)
              .globalToLocal(tapInfo.globalPosition);

          var topHalfTouched = localTouchPosition.dy < animationHeight / 2;

          var leftSideTouched = localTouchPosition.dx < animationWidth / 3;

          var rightSideTouched =
              localTouchPosition.dx > (animationWidth / 3) * 2;

          var middleTouched = !leftSideTouched && !rightSideTouched;

          // Call our animation in our conditional checks
          if (leftSideTouched && topHalfTouched) {
            _setAnimationToPlay(AnimationToPlay.CameraTapped);
            print('camera');
          } else if (middleTouched && topHalfTouched) {
            _setAnimationToPlay(AnimationToPlay.PulseTapped);
            print('Tapped');
          } else if (rightSideTouched && topHalfTouched) {
            _setAnimationToPlay(AnimationToPlay.ImageTapped);
            print('image');
          } else {
            if (isActivate) {
              _setAnimationToPlay(AnimationToPlay.Deactivate);
            } else {
              _setAnimationToPlay(AnimationToPlay.Activate);
            }

            isActivate = !isActivate;
          }
          });
        },
        child:
        FlareActor(
          'assets/img/icon/button.flr',
           controller: animationControls,
           animation: isActivate ? 'activate' : 'deactivate',
        ),
      ),

    );
  }

  String _getAnimationName(AnimationToPlay animationToPlay) {
    switch (animationToPlay) {
      case AnimationToPlay.Activate:
        return 'activate';
      case AnimationToPlay.Deactivate:
        return 'deactivate';
      case AnimationToPlay.CameraTapped:
        return 'camera_tapped';
      case AnimationToPlay.PulseTapped:
        return 'pulse_tapped';
      case AnimationToPlay.ImageTapped:
        return 'image_tapped';
      default:
        return 'deactivate';
    }
  }

  void _setAnimationToPlay(AnimationToPlay animation) {
    var isTappedAnimation = _getAnimationName(animation).contains("_tapped");
    if (isTappedAnimation &&
        _lastPlayedAnimation == AnimationToPlay.Deactivate) {
      return;
    }

    animationControls.play(_getAnimationName(animation));

    _lastPlayedAnimation = animation;
  }
}

enum AnimationToPlay {
  Activate,
  Deactivate,
  CameraTapped,
  PulseTapped,
  ImageTapped
}



android sdk manager تحميل flutter developers applications create app android android studio mac


شاهد أيضًا
مقالات ذات صلة
حل مشكلة default activity not found في الاندرويد ستوديو وعدم تشغيل التطبيق

  متابعي موقعنا الاعزاء مرحبا بكم في مقالة جديدة في برنامج android studio تعتبر اول…

يُستخدم نمط المصنع عند الحاجة إلى إنشاء كائنات دون تحديد الفئات التي سيتم استخدامها بدقة. بدلاً من ذلك، يتم استخدام المصنع لتوليد الكائنات المناسبة بناءً على المدخلات والشروط. يسمح هذا النمط بإنشاء الكائنات ديناميكيًا، مما يلغي الحاجة إلى التعامل مع تفاصيل الإنشاء مباشرةً في الشيفرة البرمجية الرئيسية.
شرح Factory Design Pattern بالتفصيل مع مثال توضيحي ومعرفة العيوب والمميزات

شرح Factory Design Pattern بالتفصيل مع مثال توضيحي ومعرفة العيوب والمميزات نمط المصنع هو واحد…

شرح تغيير ثيم الاندرويد ستوديو وتحسين الالوان البرمجية – Customize Android Studio Theme

  بسم الله الرحمن الرحيم متابعي موقعنا الاعزاء مرحبا بكم في مقالة جديدة في برنامج…

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع