🔥Challenge

❓چالش :

بنظرتون بهترین راه برای پیاده سازی قسمت کامنت ها شبیه اپ یوتیوب چیه؟ 🤔

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

❌حرکت دست روش تاثیری نداشته باشه.

#challenge
#flutter_challenge

💊Capsule

Static vs Factory Constructors in Dart

منبع :

https://www.linkedin.com/posts/vandadnp_difference-static-factory-activity-6932942346330234881-XbjP?utm_source=linkedin_share&utm_medium=android_app


#capsule
#dart

🔥Challenge

❓چالش :

میخوام در مورد StatefulWidget صحبت کنم.

🟢همون طور که میدونیم ویجت ها توی فلاتر immutable هستن و StatefulWidget یه State داره میتونه mutable باشه و به این ترتیب با استفاده از اون میشه درخت ویجت رو بر اساس فیلد هایی که توی State تغییر میکنن اپدیت کرد.

🟢توی StatelessWidget یه متد build داریم که وظیفش ساختن اون قسمت از درخت هست.

🟢توی StatefulWidget ولی این متد build رو نداریم و به جاش این متد انتقال داده شده به کلاس State.

🤔توی داک فلاتر یه بحثی رو مطرح کرده و گفته اولش به این فکر میکردیم که توی StatefulWidget هم متد build رو بذاریم توی خود کلاس ویجت و نه کلاس State ولی...

❌حالا فرض کنید که متد build به جای کلاس State توی خود کلاس StatefulWidget بود (شبیه StatelessWidget) و البته کلاس State رو هم داشتیم و این کلاس بقیه متد های مربوط به life cycle مثل initState و... رو داشت و امکان rebuild کردن رو هم با setState داشت.

🟢دقیقا همین چیزی که الان هست فقط با انتقال متد build به کلاس StatefulWidget

❓حالا شما بگید اگه این اتفاق میوفتاد چه خوبی ها و یا چه بدی هایی داشت.؟


#challenge
#flutter_challenge

یه افزوده کاربردی برای VS Code که میتونید ازش برای جستجو و اضافه کردن پکیج مورد نظرتون به فایل pubspec استفاده کنید

https://marketplace.visualstudio.com/items?itemName=jeroen-meijer.pubspec-assist

💊Capsule

Constructor vs Factory Constructor in Dart
منبع :

https://www.linkedin.com/posts/vandadnp_constructor-factory-dart-activity-6930010995234856960-Gayn?utm_source=linkedin_share&utm_medium=android_app

#dart
#capsule

💊Capsule

Window

ViewInsets vs ViewPadding vs Padding

#capsule

💊Capsule

🟢ViewInsets
پیکسل هایی هستن که سیستم عامل برای مواردی مثل کیبرد استفاده میکند(System UI)

در این نواحی هیچ محتوایی از اپ رندر نمیشود.

🟢ViewPadding
پیکسل هایی هستن که در طرفین دستگاه قرار دارن (بالا و پایین) مثل noch

🟢Padding
با استفاده از دو مقدار بالا محاسبه میشود.

Padding = max(0.0, viewPadding - viewInsets)

🔥این پراپرتی ها رو میتونید توی MediaQuery پیدا کنید.

#capsule

💊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