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

علی عظیم الشان — Thu, 27 Jan 2022 19:02:33 +0330

سلام، تو این مقاله قصد داریم صحبت راجب mouseEvent رو کامل کنیم که ادامه مقاله قبلی هستش.پس اگر هنوز نخوندینش پیشنها میکنم حتما یه نگاهی بهش بندازین. https://virgool.io/flutter-community/%D9%81%D9%84%D8%A7%D8%AA%D8%B1-%D9%88%D8%A8-%DA%86%D8%B7%D9%88%D8%B1-%D9%85%D9%88%D8%B3-%D8%AA%D8%B1%DA%A9%D8%B1-%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D9%85-utjvhyszpsue بعضی از سایت ها با استفاده از جاوا اسکریپت effect های جالبی پیاده‌سازی می کنند؛ یکی از نمونه های خوبش سایت samsaraubud هست. مینی پروژه‌ای که قصد پیاده‌سازیش رو داریم شباهت زیادی با ترکر و هاور موس این سایت داره. درمورد نحوه اجرای موس ترکر توی مقاله قبلی حرف زدیم و امروز یک هاور متفاوت رو اجرا می‌کنیم.توی تصویر زیر هر دو مورد مشخص هستن.samsaraubud سایتتو مقاله قبلی، تا ساخت موس افکت ترکر پیش رفتیم؛ که هر جایی موس رو هاور می کردیم یک کانتینر دنبالش می‌کرد. نتیجه مینی پروژه قبلی رو توی تصویر زیر می‌تونید ببینید.مینی پروژه مقاله قبلاول از همه، رنگ کانتینر (Container) رو پاک میکنیم تا بی رنگ باشه و به جاش بهش بوردر (border) با رنگ قرمز میدیم و رنگ بکگراند اصلی رو هم به مشکی تغییر میدیم.decoration: BoxDecoration( shape: BoxShape.circle, border: Border.all( color: Colors.red, width: 1, ), ),ولی تو کدی که نوشتیم، یک مشکل کوچیک وجود داشت؛ وقتی موس رو به کناره‌ها نزدیک می‌کردیم، دیگه cursor موس وسط کانتینر قرار نمی‌گرفت و این باعث می‌شد برای پیاده سازی هاور به مشکل بخوریم.پس اول از همه این مشکل رو برطرف کنیم، دقیقا مثل کاری که برای کل صفحه انجام دادیم، اینبار باید همون نسبت رو با شعاع کانتینر قرار بدیم و مقدارش رو از یک کم کنیم و درنهایت با خودش جمع کنیم که cursor رو دقیقا وسط کانتینر قرار بده.ما اینکار رو یکبار باید برای عرض صفحه (X) و یکبار برای ارتفاع (Y) صفحه انجام بدیم، پس هر دوتاشون رو کنار هم میزاریم و برای هر کدوم یک متغییر موقت جدید به اسم های xTempPadding و yTempPadding می سازیم.کد نهایی به شکل زیر میشه.pointerConverter() { double xTemp = x / screenWidth; double yTemp = y / screenHeight; double xTempPadding = xTemp - (1 - xTemp); double yTempPadding = yTemp - (1 - yTemp); setState(() { x1 = xTempPadding + (xTempPadding / 15); y1 = yTempPadding + (yTempPadding / 15); }); }بعد از این تغییرات مشکل اولی که داشتیم برطرف میشه و می تونیم بریم سراغ پیاده سازی هاور.اول از همه باید یک آیکون منو بالا صفحه قرار بدیم که وقتی روش هاور شد مثلا کانتینر از دایره به مربع تبدیل بشه و بوردر قرمزش هم کمی ضخیم تر بشه.ما تمام کد آیتم هایی که داریم داخل یک MouseRegion قرار داره که برای اضافه کردن آیکون نیازه یک Stack اضافه کنیم و آیکون رو داخلش بزاریم، به این دلیل که نیازه جایی که آیکون قرار داره رو بدیم تا بتونیم برای هاور در نظر بگیریم راهی نداریم جز اینکه داخل Align قرار بدیمش و به شکل دستی جایگاهش رو توی صفحه مشخص کنیم.Stack( children: [ Align( alignment: const Alignment(-0.9, -0.9), child: const Icon(Icons.menu, size: 40, color: Colors.red), ), MouseRegion( onHover: _updateLocation, child: Align( alignment: Alignment(x1, y1), child: Container( width: 40, height: 40, decoration: BoxDecoration( shape: BoxShape.circle, border: Border.all( color: Colors.red, width: 1, ), ), ), ), ), ], ),داخل ویجت Align به شکل دستی Alignment(-0.9, -0.9) داده شده، پس ما میدونیم که دقیقا آیکون منو ما کجای صفحه قرار داره و دقیقا پوزیشن موس هم داریم، حالا یه شرط اضافه میکنیم که اگر وارد محدوده ی آیکون شدیم برامون یک متغییر رو true کنه.یک متغییر جدید به اسم menuHovered می سازیم که جنسش bool باشه و اگر موس وارد محدوده ی آیکون شد او رو true میکنیم، برای اینکار کد زیر رو به pointerConverter ای که قرار داده بودیم اضافه میکنیم.if (-0.9 < xTempPadding && xTempPadding < -0.8 && -0.9 < yTempPadding && yTempPadding < -0.8) { setState(() { menuHovered = true; }); } else { setState(() { menuHovered = false; }); }تو این مرحله ما میدونیم که کجا وارد محدوده ی آیکون می شیم و کجا از اون محدوده خارج میشیم، پس با کمک همین متغییر ظاهر کانتینر رو عوض میکنیم.برای تغییر دادن شکل کانتینر:shape: menuHovered ? BoxShape.rectangle : BoxShape.circle,و برای تغییر دادن قطر بوردر کانتینر:border: Border.all( color: Colors.red, width: menuHovered ? 2.5 : 1, )با یکسری تغییرات کوچیک می تونیم مینی پروژه خودمون رو به samsaraubud نزدیک تر کنیم، اول از همه نیازه که به بکگراند یک تصویر اضافه بکنیم که من یک تصویر از unsplash انتخاب کردم و در نهایت به جای تغییر دادن shape موقع هاور شدن، بوردر رو حذف کنیم و به جاش کانتینر رو بزرگتر و رنگش رو هم تغییر بدیم.Container( width: menuHovered ? 60 : 40, height: menuHovered ? 60 : 40, decoration: BoxDecoration( color: menuHovered ? Colors.blueGrey.withOpacity(0.7) : Colors.transparent, shape: BoxShape.circle, border: Border.all( color: menuHovered ? Colors.transparent : Colors.red, ), ), ),که نتیجه این تغییرات بالا و اضافه کردن تصویر میشه ویدیو زیر:الان لحظه هاور شدن روی آیکون کانتینر ما خیلی سریع رنگ و اندازش تغییر میکنه که یجورایی تو ذوق میزنه، پس خیلی عالی میشه اگر یک انیمیشن ساده بهش اضافه کنیم که لحظه ی تغییر با انیمیشن باشه.برای اینکار کافیه جای Container رو با AnimatedContainer عوض کنیم و یک زمان به این ویجت بدیم که من 100 میلی ثانیه زمان رو برای این تغییر مناسب می دونم.AnimatedContainer( duration: const Duration(milliseconds: 100), width: menuHovered ? 60 : 40, height: menuHovered ? 60 : 40, decoration: BoxDecoration( color: menuHovered ? Colors.blueGrey.withOpacity(0.7) : Colors.transparent, shape: BoxShape.circle, border: Border.all( color: menuHovered ? Colors.transparent : Colors.red, ), ), ),ممنون که تا آخر مقاله همراه من بودید، اگر پیشنهاد یا انتقادی داشتید باعث افتخار اگر برای من کامنت کنید یا در لینکدین به من پیام بدین، سورس کد این پروژه روی گیتهاب من هست که با لینک زیر میتونید روی برنچ "part-2" از این مینی پروژه استفاده کنید.

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

علی عظیم الشان — Wed, 29 Dec 2021 11:30:32 +0330

سلام، تو این مقاله می خوام درباره نحوه پیاده‌سازی mouse event در فلاتر صحبت کنم؛ اسم ویجتی که ازش استفاده می‌کنم MouseRegion هست. https://api.flutter.dev/flutter/widgets/MouseRegion-class.html اول ببینیم اصلا MouseRegion چی هست؛ چه ورودی‌ها و خروجی‌هایی داره؛ بعد می‌رسیم به مثال کاربردیش!اول از همه چون این ویجت درباره ی Mouse هستش پس فقط مربوط به فلاتر وب میشه.داخل سایت فلاتر اگر این ویجت رو پیدا کنید خودش مثال جالبی زده که من ویدئوش رو این پایین براتون گذاشتم.مثال فلاتر برای MouseRegionتو مثال مشخص هستش که ما هم می تونیم جای دقیق موس رو بدونیم و هم ورود و خروج موس از باکس آبی رنگ.ما به ورود و خروج کاری نداریم میریم سراغ جای موس. double x = 0.0; double y = 0.0; void _updateLocation(PointerEvent details) { setState(() { x = details.position.dx; y = details.position.dy; }); }با استفاده از کلاس PointerEvent میشه اطلاعات دقیق محل قرارگیری موس رو دریافت کرد؛ درنتیجه میشه به position موس در هر لحظه دسترسی داشت. https://api.flutter.dev/flutter/gestures/PointerEvent-class.html حالا اگر بخوایم یه کد ساده بنویسیم که فقط جای موس رو برامون پرینت بگیره چطور؟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); }); }که با این تغییر دقیقا چیزی که می خوایم رو بدست میاریمبا لینک زیر می تونید قسمت دوم این مقاله رو هم بخونید. https://virgool.io/flutter-community/mouse-effect-2-htajgpjlsvbt اگر سوال یا پیشنهادی داشتید حتما برام کامنت کنید،سورس کد این مینی پروژه توی گیتهاب من هست، اگر پست رو دوست داشتید حتما لایک و فالو کنید. https://github.com/aliazimoshan/mouse-event

نوشته های علی عظیم الشان

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

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