آموزش برنامه نویسی فلاتر Flutter

معماری فریمورک فلاتر از پنج بخش اصلی تشکیل شده است. دو بخش اول به زبان دارت بخش سوم یا موتور فریمورک با استفاده از زبان های C/C++ طراحی شده و دو بخش آخر نیز وابسته به پلتفرم هستند. ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

معماری فلاتر ▪️ همونطور که میدونید فریمورک فلاتر از بخش های زیادی تشکیل و به دلیل چند سکویی بودن پیچیدگی های زیادی داره. ▫️ قصد داریم تا در یک مجموعه پست به شکل کلی با معماری و آناتومی اپلیکیشن های فلاتری آشنا بشیم. ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

▪️ آموزش طراحی انیمیشن و افکت Parallax  به همراه ویجت PageView 🌐 youtu.be/v_ozYdwKdaU ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

مورد بعدی برای زمان توسعه و دیباگ استفاده میشه, اگر این ویژگی فعال کنید فریمورک فلاتر سایز تصاویر و با debugImageOverheadAllowance مقایسه میکنه و در صورتی که تصاویر بزرگتر از این اندازه بودن رنگ و نوع نمایش تصویر و تغییر میده تا متوجه مشکل بشید. سایز پیش فرض debugImageOverheadAllowance برابر با 128کیلوبایت است ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

وقتی که تصاویر برنامه و کش میکنید حتما سایز مناسب انتخاب کنید تا فایل های حجیم بصورت فشرده کش بشن ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

💣 دو تا نکته کاربردی و ظریف برای بهینه سازی استفاده از تصاویر میخوایم باهم دیگه یاد بگیریم ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

الگوی طراحی Factory در برنامه نویسی چیست؟ ▪️الگوی طراحی Factory که گاهی اوقات به عنوان الگوی سازنده مجازی Virtual Constructor نیز شناخته می‌شود، راهی برای پنهان کردن منطق ایجاد یک شی را ارائه می‌دهد، اما تضمین می‌شود که شیء بازگردانده شده به یک رابط شناخته شده پایبند است. 🌐 الگوی طراحی Factory در برنامه نویسی چیست + مثال عملی در فلاتر ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

▪️ با این سایت به راحتی از طریق رنگ اصلی که انتخاب میکنید میتونید پالت‌‌های رنگی مختلفی و تهیه کنید 🌐 uicolors.app/create ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

▪️ سورس رایگان اپلیکیشن رستوران طراحی شده با فریمورک فلاتر این سورس به روز تر و با امکانات خیلی بیشتر نسبت به قبلی هست 🌐 Restaurant source ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

🟣 سلام موضوعات و مطالبی که فکر میکنید درباره اونها صحبت نکردیم و دوست دارید داخل وبسایت, کانال و یا دوره قرار بگیره و بفرمایید تا بررسی کنیم. ▪️ به آیدی داخل میتونید پیام بدید

▪️ پروژه اپن سورس سفارش غذا با فلاتر لینک مخزن 🌐 food delivery ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

متد Select ▪️ این روش با دو متد قبلی کمی تفاوت داره در این متد فیلدی که از کلاس Provider نیاز داریم دریافت کنیم و مشخص میکنیم. ویجت فقط در صورتی بازسازی میشود که این فیلد مقدارش تغییر کند. مثال:

Text("Select age:  ${context.select<Student,int>((value) => value.age) }")

⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

متد Watch ▪️ در صورتی که از این روش برای دریافت اطلاعات استفاده کنید, با تغییر اطلاعات ویجت مورد نظر نیز آپدیت میشود. مثال:

Text("Watch age:  ${context.watch<Student>().age }")

⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

متد Read ▪️ در این روش اطلاعاتی که نمایش میدهید در صورت تغییر باعث آپدیت شدن رابط کاربری نمیشود. یا اصطلاحا ویجت مجددا ساخته نمیشود. مثال:

Text("Read age:  ${context.read<Student>().age }")

⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

تفاوت روش های دریافت اطلاعات از Provider ▪️پکیج Provider روش های متفاوت و زیادی برای کار با State در اختیار توسعه دهندگان قرار میدهد. اگر قصد استفاده از ویجت هایی مثل Consumer و نداشته باشیم و بخواهیم مستقیم به شکل ساده اطلاعات را نمایش دهیم سه متد کلی وجود دارد که تفاوت هایی با یکدیگر دارند. ▫️Read ▫️Watch ▫️Select

کیت رابط کاربری متریال دیزاین 3 ▪️ فایل فیگما کیت رابط کاربری طراحی شده به زبان متریال دیزاین 3 یکی از کامل ترین کیت های طراحی شده برای Material 3 شامل کامپوننت های: ▫️Badges ▫️Bottom app bars ▫️Bottom sheets ▫️Buttons ▫️Cards ▫️Carousel ▫️Checkboxes ▫️Chips ▫️Date pickers ▫️Dialogs ▫️FAB ▫️Icon button ▫️Lists ▫️Menus ▫️Navigation bars ▫️Navigation drawer ▫️Navigation rail ▫️Progress indicators ▫️Search ▫️Side sheets ▫️Sliders ▫️Snackbars ▫️Switch ▫️Tabs ▫️Text Fields ▫️Time picker ▫️Tooltips ▫️Top App Bars 🌐 دریافت فایل ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

برای تبدیل مقدار واحد پیکسل به dp و سایر واحد ها متناسب با هر نوع رزولوشنی میتونید از محاسبه گر زیر استفاده کنید 🌐 angrytools ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

دو گوشی با سایز یکسان نمایشگر اما با رزولوشن متفاوت و تفاوت تعداد پیکسل ها برای مثال در یک گوشی در هر اینچ 20 پیکسل وجود دارد و در گوشی دیگر 40 پیکسل به همین دلیل استفاده از واحد پیکسل برای مشخص کردن اندازه آبجکت ها باعث به وجود آمدن مشکل میشود. ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

▪️درباره متفاوت بودن منابع مختلف برای سایزبندی این یک نمونه هست. واحد‌ها براساس پیکسل است که اصلا داخل اندروید پیشنهاد نمیشه ( ios تعداد محدودی گوشی داره) به دلیل اینکه رزولوشن صفحه نمایش هر گوشی متفاوت هست حتی اگر سایز نمایشگر هر دو گوشی یکسان باشد بخاطر تفاوت رزولوشن طراحی شما دچار مشکل میشود. ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir

▪️ برای بررسی سایز بندی ها هم براساس ارتفاع میتونید نقاط جداسازی و به این شکل در نظر بگیرید. ⚜️اولین مرجع فارسی فلاتر @flutter_learn_ir