عمل scale للعناصر عند تمرير الماوس عليه في صفحات ويب فلاتر

عمل scale للعناصر عند تمرير الماوس عليه في صفحات ويب فلاتر

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

How to add scale and show social media in Flutter

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

ui.dart

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

  @override
  State<MyMobileBody> createState() => _MyMobileBodyState();
}

class _MyMobileBodyState extends State<MyMobileBody>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Wrap(
              children: [
                ImageComponents(
                    img:
                        'https://images.unsplash.com/photo-1672608322232-be8fbf473789?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80',
                    txt: 'text image'),
                ImageComponents(
                    img:
                        'https://images.unsplash.com/photo-1672627695765-af28a43d40ac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80',
                    txt: 'text image'),
                ImageComponents(
                    img:
                        'https://images.unsplash.com/photo-1672530928329-e9d8041bc04e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
                    txt: 'text image'),
              ],
            )
          ],
        ),
      ),
    );
  }
}

class ImageComponents extends StatefulWidget {
  final String img;
  final String txt;

  const ImageComponents({Key? key, required this.img, required this.txt})
      : super(key: key);

  @override
  State<ImageComponents> createState() => _ImageComponentsState();
}

class _ImageComponentsState extends State<ImageComponents> {
  bool animate = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 25, vertical: 20),
      height: 400,
      width: 330,
      child: Stack(
        children: [
          Align(
            alignment: Alignment(0, 0),
            child: Container(
              height: 400.0,
              width: 330.0,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                color: Colors.grey[200],
              ),
             child: NavigationIcon(stateOfIcon: animate),
            ),
          ),
          Align(
            alignment: Alignment(0, 1),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(60),
              ),
            ),
          ),



          Align(
            alignment: Alignment(0, 1),
            child: AnimatedOpacity(
              opacity: animate ? 1 : 0,
              duration: const Duration(milliseconds: 180),
              child: Container(
                padding: const EdgeInsets.all(18.0),
                child: Text(
                  widget.txt,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ),
          MouseRegion(
            onEnter: (event) {
              setState(() {
                animate = true;
              });
            },
            onExit: (event) {
              setState(() {
                animate = false;
              });
            },
            child: Align(
              alignment: Alignment.center,
              child: AnimatedContainer(
                height: animate ? 290 : 430,
                width: animate ? 230 : 370,
                duration: const Duration(milliseconds: 275),
                clipBehavior: Clip.antiAlias,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Image(
                  image: NetworkImage(widget.img),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

class NavigationIcon extends StatefulWidget {
  final bool stateOfIcon;

  const NavigationIcon({Key? key, required this.stateOfIcon}) : super(key: key);

  @override
  State<NavigationIcon> createState() => _NavigationIconState();
}

class _NavigationIconState extends State<NavigationIcon> {
  bool animate1 = false;
  bool animate2 = false;
  bool animate3 = false;

  void driverFunction() {
    if (widget.stateOfIcon) {
      setState(() {
        animate1 = true;
        Future.delayed(Duration(milliseconds: 300), () {
          setState(() {
            animate2 = true;
          });
        });
        Future.delayed(Duration(milliseconds: 600), () {
          setState(() {
            animate3 = true;
          });
        });
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
      ),
      padding: const EdgeInsets.all(15.0),
      height: 55,
      width: 330,
      child: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            AnimatedPositioned(
              top: widget.stateOfIcon ? 0 : -100,
                left: 57,
                child: Row(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(right: 30),
                      child: Icon(
                        Icons.home,
                        size: 30,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(right: 30),
                      child: Icon(
                        Icons.remove_from_queue,
                        size: 30,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(right: 30),
                      child: Icon(
                        Icons.access_time_filled,
                        size: 30,
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.only(right: 30),
                      child: Icon(
                        Icons.account_tree,
                        size: 30,
                      ),
                    ),
                  ],
                ),
                duration: Duration(milliseconds: 275)
            ),
          ],
        ),
      ),
    );
  }
}