فلاتر وب - mouse effect (قسمت اول)

سلام، تو این مقاله می خوام درباره نحوه پیاده‌سازی mouse event در فلاتر صحبت کنم؛ اسم ویجتی که ازش استفاده می‌کنم MouseRegion هست.

اول ببینیم اصلا MouseRegion چی هست؛ چه ورودی‌ها و خروجی‌هایی داره؛ بعد می‌رسیم به مثال کاربردیش!

اول از همه چون این ویجت درباره ی Mouse هستش پس فقط مربوط به فلاتر وب میشه.

داخل سایت فلاتر اگر این ویجت رو پیدا کنید خودش مثال جالبی زده که من ویدئوش رو این پایین براتون گذاشتم.

تو مثال مشخص هستش که ما هم می تونیم جای دقیق موس رو بدونیم و هم ورود و خروج موس از باکس آبی رنگ.

ما به ورود و خروج کاری نداریم میریم سراغ جای موس.

  double x = 0.0;
  double y = 0.0;  

void _updateLocation(PointerEvent details) {
 setState(() {
          x = details.position.dx;
          y = details.position.dy;
      });
  }

با استفاده از کلاس PointerEvent میشه اطلاعات دقیق محل قرارگیری موس رو دریافت کرد؛ درنتیجه میشه به position موس در هر لحظه دسترسی داشت.

حالا اگر بخوایم یه کد ساده بنویسیم که فقط جای موس رو برامون پرینت بگیره چطور؟

MouseRegion(
   onHover: (PointerHoverEvent event) {
         print('x: ${event.position.dx}, y: ${event.position.dy}');
          },
        },
     child: child,
)

حالا مثال کاربردیش چی میشه؟ فرض کنید قصد داریم position فعلی موس رو بگیریم و ویجت دیگه‌ای (مثل Container) رو توی Align به‌شکلی قرار بدیم که Container هرجا که cursor موس حرکت میکنه دنبالش بره! اول از همه لازمه که اندازه ی صفحه رو بدونیم پس طول و عرض رو داخل متغیر قرار می‌دیم، مقدار فعلی موس رو بر اندازه‌ی صفحه تقسیم می‌کنیم (طول جدا، عرض جدا) و بعد مقدار به‌دست اومده رو توی متغیر جدید قرار می‌دیم (در کد پایین x1 و y1).

// under build context
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
  pointerWidthConverter() {
       setState(() {
           x1 = x / screenWidth;
       });
   }
   pointerHeightConverter() {
       setState(() {
             y1 = y / screenHeight;
      });
  }

استفاده از کد یجورایی مشکل داره! چون حاصل تقسیم Align از -1 تا 1 هست؛ ولی جواب تقسیم بالا بین 0 تا 1 میشه! که نتیجه‌اش میشه مثل این پایین.

برای حل این مشکل کافیه که 1 رو از جواب نهایی کم کنیم و دوباره با خودش جمع کنیم. پس به یک متغیر temp نیاز داریم و مثل زیر تعریفش می‌کنیم.

pointerWidthConverter() {
  setState(() {
         double temp = x / screenWidth;
         x1 = temp - (1 - temp);
    });
}
pointerHeightConverter() {
  setState(() {
       double temp = y / screenHeight;
       y1 = temp - (1 - temp);
  });
}

که با این تغییر دقیقا چیزی که می خوایم رو بدست میاریم

با لینک زیر می تونید قسمت دوم این مقاله رو هم بخونید.

اگر سوال یا پیشنهادی داشتید حتما برام کامنت کنید،

سورس کد این مینی پروژه توی گیتهاب من هست، اگر پست رو دوست داشتید حتما لایک و فالو کنید.