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

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

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

Add Effect on Items in web page by using Flutter

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

effect.dart

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

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

class _MyMobileBodyState extends State<MyMobileBody> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,
      body: Hover(),
    );
  }
}

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

  @override
  State<Hover> createState() => _HoverState();
}

class _HoverState extends State<Hover> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 500,
        height: 600,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(60),
        ),
        child: buttonUI(),
      ),
    );
  }
  buttonUI() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: List.generate(6, (index) => ButtonHover(
        index: index,
        title: 'title test',
      ))
    );
  }
}

class ButtonHover extends StatefulWidget {
  final int index;
  final String title;
  const ButtonHover({Key? key,required this.index , required this.title}) : super(key: key);

  @override
  State<ButtonHover> createState() => _ButtonHoverState();
}

class _ButtonHoverState extends State<ButtonHover> {
  bool isHover = false;
  // create random color.
  Color color = Colors.primaries[math.Random().nextInt(Colors.primaries.length)];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SingleChildScrollView(
        child: MouseRegion(
            onEnter: (event) {
            setState(() {
              isHover = true;
            });
          },
            onExit: (event) {
              setState(() {
                isHover = false;
              });
            },
            child: AnimatedContainer(
              duration: Duration(milliseconds: 200),
              height: isHover ? 120 : 85,
              width: 500,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topRight: (widget.index == 0) ? Radius.circular(60) : Radius.circular(0),
                  topLeft: (widget.index == 0) ? Radius.circular(60) : Radius.circular(0),
                  bottomRight: (widget.index == 5) ? Radius.circular(60) : Radius.circular(0),
                  bottomLeft: (widget.index == 5) ? Radius.circular(60) : Radius.circular(0),

                  // if you want to change the radius of the button to circle.

                  // topRight: (isHover || widget.index == 0) ? Radius.circular(60) : Radius.circular(0),
                  // topLeft: (isHover || widget.index == 0) ? Radius.circular(60) : Radius.circular(0),
                  // bottomRight: (isHover || widget.index == 5) ? Radius.circular(60) : Radius.circular(0),
                  // bottomLeft: (isHover || widget.index == 5) ? Radius.circular(60) : Radius.circular(0),

                ),
                boxShadow: [
                  BoxShadow(
                    color: isHover ? Colors.pink.withOpacity(0.3) : Colors.transparent,
                    spreadRadius: 5,
                    blurRadius: 12,
                  ),
                ],
              ),
              child: addElement(),
        )),
      ),
    );
  }
  addElement() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          width: 80,
          height: isHover ? 120 : 85,
          child: Center(
            child: AnimatedContainer(
              duration: Duration(milliseconds: 200),
              height: isHover ? 50 : 35,
              width: isHover ? 50 : 35,
              decoration: BoxDecoration(
                color: isHover ? Colors.pink : Colors.grey.shade200,
                borderRadius: BorderRadius.circular(100),
              ),
              child: AnimatedDefaultTextStyle(
                duration: Duration(milliseconds: 200),
                style: TextStyle(
                  color: isHover ? Colors.white : Colors.grey.shade700,
                  fontSize: isHover ? 19 : 13,
                  fontWeight: isHover ? FontWeight.bold : FontWeight.normal,
                ),
                child: Center(
                  child: Text('${widget.index.toString()}'),
                ),
              ),
            ),
          ),
        ),
        Spacer(),
        AnimatedDefaultTextStyle(
          duration: Duration(milliseconds: 200),
          style: TextStyle(
            color: isHover ? Colors.redAccent : Colors.grey.shade700,
            fontSize: isHover ? 28 : 19,
            fontWeight: isHover ? FontWeight.bold : FontWeight.normal,
          ),
          child: Center(
            child: Text('${widget.title}'),
          ),
        ),
        Spacer(),
      ],
    );
  }
}