إضافة أيقونة متعددة الخصائص مع أنيميشن باستخدام 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

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

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