تصميم صفحة ويب لعرض منتجاتك مع انميشن عند تمرير الماوس على العنصر في flutter

تصميم صفحة ويب لعرض منتجاتك مع انميشن عند تمرير الماوس على العنصر في flutter

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

How to create web page to display your products by Flutter

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

ui.dart

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

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

class _MyMobileBodyState extends State<MyMobileBody> {
  Color color = Colors.pink;
  double image1right = 100;
  double image2right = -700;
  double image3right = -700;

  void change(int a) {
    setState(() {
      if (a == 1) {
        color = Colors.blue.shade200;
        image1right = 100;
        image2right = -700;
        image3right = -700;
      } else if (a == 2) {
        color = Colors.green.shade200;
        image1right = -700;
        image2right = 100;
        image3right = -700;
      } else {
        color = Colors.black.withOpacity(0.3);
        image1right = -700;
        image2right = -700;
        image3right = 100;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: [
        Positioned(
            bottom: -100,
            right: -200,
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 500),
              curve: Curves.easeIn,
              height: MediaQuery.of(context).size.height * 0.8,
              width: MediaQuery.of(context).size.height * 0.8,
              decoration: BoxDecoration(
                color: color,
                borderRadius: BorderRadius.circular(
                  MediaQuery.of(context).size.height * 0.5,
                ),
              ),

            )),
    
    ImageHolder(right: image1right, img: 'assets/img/background/drink1.png'),
    ImageHolder(right: image2right, img: 'assets/img/background/drink2.png'),
    ImageHolder(right: image3right, img: 'assets/img/background/drink3.png'),

    Positioned(
      width: 400,
      right: MediaQuery.of(context).size.width * 0.3,
        bottom: 20,
        child: Row(
          children: [
            HoverButton(img: 'assets/img/background/drink1.png', hover: (){
              change(1);
            },
            num: 1,
            ),
            HoverButton(img: 'assets/img/background/drink2.png', hover: (){change(2);}, num: 2),
            HoverButton(img: 'assets/img/background/drink3.png', hover: (){change(3);}, num: 3),
          ],
        )),


        Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.green.shade600,
                    radius: 30,
                    child: Center(
                        child: Image.asset('assets/img/map/avatar-3.png')),
                  ),
                  Spacer(),
                  NavBarButton(text: "what's new"),
                  NavBarButton(text: "home"),
                  NavBarButton(text: "content"),
                  NavBarButton(text: "Menu"),
                ],
              ),
            ),
            SizedBox(
              height: 50,
            ),
            Padding(
              padding: const EdgeInsets.only(left: 50),
              child: Text(
                "it's not just a coffee",
                style: TextStyle(
                    fontSize: 60,
                    fontWeight: FontWeight.w400,
                    color: Colors.black),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 50),
              child: Row(
                children: [
                  Text(
                    "it's ",
                    style: TextStyle(
                        fontSize: 60,
                        fontWeight: FontWeight.w400,
                        color: Colors.black),
                  ),
                  Text(
                    "Starbucks ",
                    style: TextStyle(
                        fontSize: 60,
                        fontWeight: FontWeight.w900,
                        color: Colors.black),
                  ),
                ],
              ),
            ),
            Container(
                padding: const EdgeInsets.only(left: 50, top: 10),
                width: MediaQuery.of(context).size.width * 0.5,
                child: Text(
                  "description coffee , description coffee , description coffee , description coffee",
                  style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w400,
                      color: Colors.black54),
                )),
            Container(
              width: 150,
              margin: EdgeInsets.only(right: 15, top: 15.0, left: 50.0),
              padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 12.0),
              decoration: BoxDecoration(
                color: Colors.green.shade700,
                borderRadius: BorderRadius.circular(7.0),
              ),
              child: Center(
                child: Text('leran more',
                    style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w600,
                        color: Colors.white)),
              ),
            ),
          ],
        )
      ],
    ));
  }
}

class ImageHolder extends StatefulWidget {
  final double right;
  final String img;
  const ImageHolder({Key? key,required this.right,required this.img}) : super(key: key);

  @override
  State<ImageHolder> createState() => _ImageHolderState();
}

class _ImageHolderState extends State<ImageHolder> {
  @override
  Widget build(BuildContext context) {
    return AnimatedPositioned(
      bottom: 140,
      right: widget.right,
      child: Container(
        height: MediaQuery.of(context).size.height * 0.65,
        child: Image(
          image: AssetImage(widget.img),
        ),
    ), duration: Duration(milliseconds: 400),);
  }
}

class HoverButton extends StatefulWidget {
  const HoverButton({Key? key, required this.img, required this.hover, required this.num})
      : super(key: key);
  final String img;
  final int num;
  final Function hover;

  @override
  State<HoverButton> createState() => _HoverButtonState();
}

class _HoverButtonState extends State<HoverButton> {
  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (e) {
          widget.hover();
      },
      child: Container(
        height: 80,
        width: 100,
        child: Image(
          image: AssetImage(widget.img),
        ),
      ),
    );
  }
}

class NavBarButton extends StatefulWidget {
  final String text;

  const NavBarButton({Key? key, required this.text}) : super(key: key);

  @override
  State<NavBarButton> createState() => _NavBarButtonState();
}

class _NavBarButtonState extends State<NavBarButton> {
  Color color = Colors.transparent;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (a) {
        setState(() {
          color = Colors.black87;
        });
      },
      onExit: (e) {
        setState(() {
          color = Colors.transparent;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 375),
        curve: Curves.easeInOut,
        margin: EdgeInsets.only(right: 15.0),
        padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(5.0),
            border: Border.all(color: color, width: 1.5)),
        child: Center(
          child: Text(
            widget.text,
            style: TextStyle(
              color: Colors.black,
              fontSize: 16,
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
      ),
    );
  }
}