Flutter MouseRegion

MouseRegion
MouseRegion


کسایی که فلاتر وب کار میکنن مسلما یه نقطه ای احساس کردن نیازه که بتونن cursor ماوس رو وقتی که میره روی یک ویجت یا یه نقطه از صفحه عوض کنن و خب راه خوبی براش پیدا نمیکردن. تا قبل از امروز که متوجه یه موضوع جالب شدم برای حل این مشکل توی وب اینکارو میکردم.

  • اول از همه توی پوشه پلتفرم web کنار پوشه lib باید فایل index.html رو باز کنیم به تگ body یه id اختصاص بدیم. (هدف اینه هرجا نشانگر ماوس از روی ویجتمون رد شد یا بعبارتی hover اتفاق افتاد واسه ویجتمون، میگیم که cursor رو برای body عوض کن اینطوری درسته که به خود اون المنت توی صفحه cursor ندادیم اما با این کلک تونستیم نشانگر رو عوض کنیم)
<body id=&quotapp-container&quot>
  • بعد از اینکار واسه اینکه بتونیم راحت تر برای هر ویجتی که خواستیم این امکان رو برقرار کنیم کافیه یه extension روی ویجت بسازیم و هر ویجت رو با MouseRegion بیایم Wrap کنیم بعد توی onHover اون ویجت cursor رو برای body تغییر بدیم.
extension MouseCursor on Widget {
  static final appContainer =
      html.window.document.getElementById('app-container');

  Widget cursor(
      {String type = 'default',
      Function(PointerHoverEvent e) onHover,
      Function(PointerExitEvent e) onExit,
      Function(PointerEnterEvent e) onEnter}) {
    return MouseRegion(
        child: this,
        onHover: (PointerHoverEvent e) {
          appContainer.style.cursor = type;
          if (onHover != null) onHover(e);
          // you can use any of these:
          // 'help', 'wait', 'move', 'crosshair', 'text' or 'pointer'
          // more options/details here: http://www.javascripter.net/faq/stylesc.htm
        },
        onExit: (PointerExitEvent e) {
          // set cursor's style 'default' to return it to the original state
          appContainer.style.cursor = 'default';
          if (onExit != null) onExit(e);
        },
        onEnter: (PointerEnterEvent e) {
          if (onEnter != null) onEnter(e);
        });
  }
}
  • و در نهایت برای استفاده ازش کافیه هر ویجتی که میخواین مثلا ماوس رو اون به شکل دست (pointer | click | hand اینا همشون یکی ان :)) در بیاد کافیه به شکل زیر از افزونه ای که نوشتیم استفاده کنید.
widget.cursor(type: 'pointer')

اما خب بعد از مدت ها با کلی ترس و لرز فلاتر رو بروزرسانی کردم و اتفاق خیلی جذابی افتاده بود (انتظار داشتم مشکل لعنتی TextField/TextFormField با زبون فارسی و عربی حل بشه ولی نشدهههههه).

به ویجت MouseRegion یک Property جدید اضافه شده به اسم cursor و دیگه نیازی به این دردسرا نیست و خیلی راحت میتونیم بنویسیم :

cursor: SystemMouseCursors.click

رشد فلاتر حقیقتا امیدوار کنندست اما از اینکه هنوز TextField این وضعیت رو داره خیلی ناراحتم :(

یه کاریش بکنید توروخدا!!!