💊Capsule

🔥توی اندروید های 10 به بعد یا Ui های اختصاصی شده مثل miui شاید دیده باشین که با کشیدن دست روی طرفین صفحه نمایش (چپ و راست) میتونیم صفجه رو بک کنیم.

🟢این قسمت ها یا این پیکسل ها در واقع پیکسل هایی هستن که محتوای اپ داخلشون رندر میشه ولی input gestures توی این پیکسل ها تشخیص داده نمیشه.

🟢در واقع سیستم عامل input gestures این پیکسل ها رو خودش مصرف میکنه و اجازه مدیریت اون توسط اپ رو نمیده.

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

🔥مقدار پیکسلی که سیستم عامل توی این نواحی مصرف میکنه رو میشه با این پراپرتی از MediaQuery بدست اورد :‌

systemGestureInsets

#capsule

🔥Adaptive UI

🟢همون طور که میدونیم با فلاتر میتونیم برای پلتفرم های مختلف مثل وب، اندروید، ویندوز و... برنامه بنویسیم و از این رو برنامه ما ممکنه توی پلتفرم های مختلف یا اسکرین های مختلف (با سایزهای متفاوت) ران بشه.

🔥نکته ای که اهمیت پیدا میکنه این هست که برنامه انعطاف پذیر باشه و بتونه خودش رو با همه این شرایط وفق بده.

مثلا :
✔️تغییر چینش عناصر در سایزهای مختلف (سایز گوشی و دسکتاپ و....)
✔️استفاده از زبان طراحی مختلف در پلتفرم های مختلف
✔️ردیابی حرکات موس در پلتفرم های دسکتاپی
✔️و...

🔥برای این موضوع پکیجی با نام flutter_adaptive_ui طراحی کردم.

https://pub.dev/packages/flutter_adaptive_ui

🔥پکیج رو بررسی کنید و نظرات و باگ های احتمالی رو بگید. 🙏

❤️❤️لطفا پکیج رو توی pub لایک کنید.❤️❤️

🔥در صورت تمایل میتونید در توسعه پکیج مشارکت کنید.

🔥Article

Deep linking

https://docs.flutter.dev/development/ui/navigation/deep-linking

#article

توی ورژن جدید پکیج
0.8.0-dev.2

ویجت های
PlatformBuilder
AdaptiveDesign
اضافه شدند

یک constructor با نام
Adaptivebuilder.custom
هم به ویجت AdaptiveBuilder اضافه شد و بعضی از پارامتر های constructor قبلی deprecated شدند

اگه نظری راجب این ها و موارد دیگه ای که میخواین به پکیج اضافه بشه دارین توی کامنت بگین.

💊Capsule
BottomSheet
ℹ️

🔥توی متریال دیزاین دو نوع ‌Bottom Sheet داریم.

✔️Persistent
این نوع در واقع مکمل محتوای اصلی هست و جلوی تعامل کاربر با بقیه قسمت های صفحه رو نمیگیره و با لمس کردن بقیه قسمت های اپ بسته نمیشه.

🟢این نوع رو میشه به دو روش استفاده کرد :

🔥پارامتر bottomSheet توی ویجت Scaffold

🔥🔥استفاده از فانکشن
showBottomSheet
و یا
Scaffold.of(context).showBottomSheet()

🔴هر کدوم از این روش ها تفاوت هایی دارن که بعدا اشاره میکنیم.

✔️Modal
این نوع درواقع یک گزینه جایگزین برای Dialog یا popup menu هست و جلوی تعامل کاربر با بقیه قسمت های صفحه رو میگیره.

🟢در صورتی که Dismissible باشه با لمس کردن قسمت های دیگه صفحه بسته میشه.

🔥این مورد رو میشه با استفاده از فانکشن
showModalBottomSheet

استفاده کرد.

#capsule
#intermediate

💊Capsule
BottomSheet
2️⃣

✔️Persistent

گفتم که این مورد رو میشه به دو روش پیاده کرد.

🔥پارامتر bottomSheet توی Scaffold :‌

توی این حالت :‌

✅باتم شیت جزو محتوای اصلی صفحه حساب میشه.

✅جلوی تعامل کاربر با بقیه المان های صفحه رو نمیگیره

✅با لمس کردن بقیه قسمت های صفحه بسته نمیشه

❌امکان درگ کردن و بسته و باز کردن خود باتم شیت توسط کاربر نیست

❌دکمه بک به اپ بار اضافه نمیشه

❌با بک زدن یا Navigator.pop کل صفحه بسته میشه

🔥توی این حالت باتم شیت اون پایین صفحه میمونه و به هیچ وجه قابل بستن نیست مگر اینکه توی برنامه ست استیت کنی و توی build جدید باتم شیت نداشته باشی

#capsule
#intermediate

💊Capsule
BottomSheet
3️⃣

✔️Persistent

و اما روش دوم

🔥استفاده از فانکشن
showBottomSheet
یا
Scaffold.of(context).showBottomSheet

توی این حالت:

✅باتم شیت جلوی تعامل کاربر با بقیه قسمت های صفحه رو نمیگیره

✅با لمس کردن بقیه قسمت های صفحه بسته نمیشه

❌امکان درگ کردن و بسته و باز کردن باتم شیت توسط کاربر وجود داره

❌دکمه بک به اپ بار اضافه میشه

❌با بک زدن یا Navigator.pop ابتدا باتم شیت بسته میشه و با بک دوم صفحه

🔥توی این حالت باتم شیت قابل درگ شدن و بسته و باز شدن توسط کاربر هست و با بک هم بسته میشه.

#capsule
#intermediate

ورژن جدید این پکیج
flutter_adaptive_ui
هم منتشر شد
0.8.0

https://pub.dev/packages/flutter_adaptive_ui

توی این ورژن روی README هم کار کردم و نسبت به قبل خیلی بهتر شده 😍😍

BottomSheet
4⃣

خب تا اینجا bottom sheet های نوع Persistent رو دیدیم و با دو روش استفاده از اون ها ، شباهت ها و تفاوت های این روش ها اشنا شدیم.

❓حالا چرا به اینا میگن Persistent؟

🔥این کلمه به معنی ماندگار هست (یه چیز توی این مایه ها 😝)

حالا چون این نوع از bottom sheet ها مزاحم کار کردن با بقیه قسمت های صفحه نمیشن و با کار کردن با بقیه قسمت های صفحه بسته نمیشن، توی متریال دیزاین بهشون میگن

Persistent Bottom Sheets

#capsule
#intermediate

💊Capsule
GIT

🔥چطوری توی گیت کامیت های خوب, استاندارد و قابل فهم بزنیم؟

ساختار کامیت :‌
<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

چیزی که بیشتر مرسومه :‌
<type>[optional scope]: <description>

توضیحات بیشتر :
https://www.conventionalcommits.org/en/v1.0.0/

💊Capsule
GIT

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

#git
#intermediate

توی این پست راجب خط اول صحبت میکنم.


🟢<type>(<scope>): <subject>

✔️type : required
✔️scope : optional
✔️subject: required

✅type
میتونین به صورت قراردادی توی پروژه ای که دارین انجام میدین type های مختلف رو مشخص کنید .

🔥یه سری type هایی که مرسوم هست :
🔰feat(feature)
وقتی یه چیز جدیدی اضافه کردی
🔰docs
وقتی داکیومنت تغییر کرده یا داکیومنت نوشتی
🔰fix
وقتی یه باگی رو فیکس کردی
🔰refactor
یه کدی رو تغییر دادی که نه ویژگی جدید اضافه شده و نه باکی فیکس شده
🔰style
کد ها رو فرمت کردی
مثلا خطهای اضافه رو پاک کردی
اسپیس ها رو درست کردی
که فقط کدها قشنگتر به نظر بیان
🔰test
یه تستی نوشتی
🔰chore
کارهایی مثل اضافه کردن به دپندنسی یا فایل pubsoec که تغییری توی کدها ایجاد نمیکنن

#git
#intermediate

🟢<type>(<scope>): <subject>

✔️type : required
✔️scope : optional
✔️subject: required

✅scope

🔥این پارامتر اختیاری هست

🔥کاملا قراردادی هست و بستگی داره به پروژه ای که انجام میدین و توی پروژه باید مشخص کنید که این پارامتر چه مواردی رو میتونه در بر بگیره .

❌پس دنبال موارد از پیش تعیین شده نباشید

🔰برای نمونه توی یه پروژه ای که لایه های مختلف مثل presentation, data, logic داره .
این ها میتونن به عنوان scope در نظر گرفته بشن

🔰یا پروژه ای که سرویس های مختلف داره...

🔰ریپوزیتوری bloc روی گیت هاب که خودش از پروژه های مختلف مثل bloc, fluttet_bloc, ... تشکیل شده، هر پروژه رو به عنوان یه scope در نظر گرفته.

✅پس کاملا قراردادیه.

✅مثل مورد قبلی یعنی type, ابتدای پروژه باید یه لیستی رو مشخص کنید و قرارداد کنید و از اون پیروی کنید ( البته در طول پروژه میتونه بروزرسانی بشه)

#advanced
#capsule

🟢<type>(<scope>): <subject>

✔️type : required
✔️scope : optional
✔️subject: required

✅subject

🔥برای این مورد از یک جمله کوتاه برای شرح دادن commit مورد نظر استفاده کنید.

جمله باید :

✔️زمان حال ساده باشه.
✔️امری باشه.
✔️با حروف کوچک شروع بشه.
✔️تهش نقطه نباشه

✅update the folan thing
❌Update the folan thing
❌update the folan thing.
❌updated the folan thing
❌the folan thing is updated
❌the folan thing was updated
❌the folan thing has been updated

#capsule
#advanced

برنامه‌نویسی در فیلم‌ها vs برنامه‌نویسی در دنیای واقعی :)

🔻Ayub

@BahseAzad 🪴

🔥Challenge

❓ چالش :

▶️سناریو :

فرض کنید که میخواین توی تیم نقشه نشان استخدام بشید و کار اصلی که از شما میخوان این هست که یه SDK برای فلاتر بنویسید

همچنین به شما گفته میشه که ما الان یه دونه SDK نیتیو داریم و شما باید از همون استفاده کنید و یه دونه SDK برای فلاتر توسعه بدید...

در نهایت باید همه قابلیت های نیتیو اعم از کار کردن با نقشه و مارکر زدن توی نقشه و این ور اون ور کردن نقشه و... رو توی فلاتر هم داشته باشیم

خب پیشنهاد هاتون رو بگید که چکار میکنید و از چه روشی استفاده میکنید


#challenge

برای اپ های فلاتریتون چه معماری استفاده میکنید؟

چطوری یادش گرفتید؟
بنظرتون تا چه حد بهش مسلط هستید؟
چطوری دانشتون رو در موردش ارتقا میدید؟

چقدر با دیزاین پترن ها آشنایی دارین؟

کدوم ها رو بلدین؟
کدوم ها رو صرفا سینتکسش رو بلدین؟
کدوم ها رو به صورت کاربردی ازش استفاده میکنین؟

به غیر از سینگلتون 😅😝

🔥Challenge

❓چالش:

تفاوت extends و implement رو بگید یا با هم مقایسشون کنید.

#challenge

💊Capsule
🔥extends vs implement
1⃣

🟢واژه extend به معنای گسترش دادن یا توسعه دادن هست

B extends A

یعنی اینکه B داره A رو توسعه میده (گسترش میده)

🟢واژه implement به معنای پیاده سازی یا اجرا کردن هست

B implement A

یعنی B داره A رو پیاده سازی میکنه.

#capsule