مهدی نعمتی
افزونه های VS code مورد نیاز برای فلاتر
تو این پست میخوام یه سری افزونه (Extension) برای ویژوال استدیو کد (Visual Studio Code) رو معرفی کنیم که یه سری از این افزونه ها برای پروژه های فلاتر هست و یه سریشون هم کلا برای کد نویسی به زبان های دیگه هست تا کد نویسی ساده تر و سریعتر بشه. 1 . ساخت ویجت ها تو فلاتر به سریعترین شکل با Awesome Flutter Snippets این ویجت مجموعه ای از ویجت ها، کلاس ها و متد های پر استفاده رو تو خودش نگه میداره که میتونین خیلی سریع و با نوشتن چند حرف از اون ها استفاده کنین. ( لینک ) 2 . بدون رفتن به مرورگر مستقیم پکیج به پروژه اضافه کن با Pubspec Assist دیگه نیازی نیست برای پیدا کردن یه پکیج بری و مرورگر رو باز کنی و دنبال پکیجت بگردی و اسمش و کپی کنی و بیاری تو اپ، با کمک این پکیج خیلی ساده تر میتونی پکیج مورد نظر رو پیدا کنی و خودکار به اپ اضافه بشه. برای اینکار از کلید های Ctrl + Shift + P رو میگیریم بعدش میگیم که Pubspec Assist رو میخوایم ، مرحله بعدش نوع ش رو میگیم که چی باشه که یکی از دو مورد normal یا dev هست و بعدش هم اسم پکیجمون و دکمه انتر و تمام. ( لینک ) 3 . استفاده ساده تر از کتابخانه Reverpod با افزونه Flutter Riverpod Snippets اگه خواستین از کتابخونه reverpod راحتتر استفاده کنین این افزونه دقیقا برای همین کار ساخته شده ( لینک ) 4 . منظم کردن ایمپورت های dart-import با دو جرکت ایپورت های صفحه رو مرتب کن ، اول با گرفتن کلید های Ctrl + Shift + P و بعدش هم تایپ Fix Imports و زدن دکمه انتر ( لینک ) 5 . دادن آیکون مرتبط با هر فولدر به جای آیکون ساده فولدر یا Material Icon Theme فقط کافیه این افزونه رو نصب کنید، خودش بقیه کارا رو انجام میده ( لینک ) 6 . حذف فضای خالی بیهوده از کدها با افزونه Remove empty lines برای اینکه تو سریعترین حالت ممکن فضای خالی اضافه را حذف کنین از این افزونه میتونید استفاده کنید، کار باهاش هم راحته دکمه های Ctrl+ Shift + P و عبارت Remove empty lines را بنویسید. 7 . گرفتن اسکرین شات تو یه زیبا با CodeSnap برای این کار کلید های ترکیبی Ctrl + Shift + P رو میگیریم و عبارت CodeSnap رو تایپ میکنیم، کدی که میخوایم رو انتخاب میکنیم و بعدش آیکونی که برای ما به نمایش در میاد رو میزینم ،اسکرین شات آماده میشه
.jpg)
مهدی نعمتی
چه شرکت هایی از فلاتر استفاده میکنن
اگه هنوز هم به قدرت فلاتر ایمان نیاوردین، تو این پست میخوایم چندتا از پروژه های خوب فلاتری که توسط شرکت های بزرگ توسعه داده شده رو بررسی کنیم تا ببینیم چقدر فلاتر میتونه قدرت داشته باشه Google Pay سرویس گوگل پی بیش از 100 میلیون کاربر تو کشور های مختلف داره و اپی که برای این کار داشته و حدود 1.7 میلیون خط کد برای اندروید و ios نوشته بودن. یه حساب و کتاب ساده هم انجام بدیم متوجه میشیم یه تغییر تو یه لاجیک چه وقتی رو از تیم توسعه میگرفته یا اینکه اگه مشکلی وجود داشت باید دو تا اپ با هم مشکلشون حل میشد. از اون سمت هم برای هر پلتفرم نیاز به تیم و افراد بیشتری هم بوده. اینجوری شد که گوگل تصمیم گرفت این پروژه رو به فلاتر منتقل کنه، که نتیجه این کار به این شکل شد که : حدود 70% کار کردن روی این پروژه کمتر شد حدود 35% هم تعداد خط از کد ها کمتر شد این تغییر تا حدی خوب بود که David Ko مدیر بخش مهندسی (Engineering Director) گفته بود که : «همه فلاتر را دوست داشتند؛ می توانستیم هیجان را در چهره های افراد ببینیم که در مورد سرعت ساخت یک رابط کاربری صحبت می کردند.» eBay ایبی رو که همه میشناسیم تقریبا، داستان از اونجا شروع میشه که کسایی که تو کار خرید و فروش ماشین بودن به ایبی اعتماد خاصی داشتن، و تو سال 2018 تیم eBay Motors با خودشون میگن یه اپ مخصوص این افراد تولید کنیم که کارشون راحتتر بشه، بعد از اینکه تیمشون نشست و بررسی کرد متوجه شدننوشتن دو تا اپ یکی برای اندروید و یکی ios تو اون مدت زمانی که داشنن غیر ممکنه، برای همین دنبال یه سیستم چند پلتفرمی میگشت. اون زمان تازه نسخه های اولیه فلاتر منتشر شده بود و ایبی تقریبا یک ماهی رو روی بررسی فلاتر وقت گذاشت در نهایت فلاتر رو انتخاب کرد. ایبی یه گروهی رو فرستاد به یه دوره آموزش فلاتر و بعدش کارش رو شروع کرد، و هرچقدر هم کارا رو پیش میبردن بیشتر از این فریمورک لذت میبردن تا جایی که کوری اسپراگ، مهندس ارشد (Senior iOS Engineer) گفته بود که "فلاتر نه تنها انتظارات ما را برآورده کرده، بلکه به طور چشمگیری از آنها فراترهم رفته است." یه نگاهی هم بخوایم به آمار ایبی از این کار بندازیم میرسیم به اطلاعات زیر : 98.3 درصد کدهای مشترک بین پلتفرم ها سرعت توسعه تقربیا دو برابری تمامیه توسعه دهندگان گفتن که فلاتر رو به روش های فعلی ترجیح میدن! لینک مقاله رو در سایت ایبی میتونید تو این لینک مشاهده کنید Alibaba Group علی بابا بزرگترین فروشگاه دست دوم کالای تو کشور چین هست که یه بخشی از کارش رو روی اپ فلاتر آورده، وقتی که تیم Xianyu خواست یه برنامه ای داشته باشن که کراس پلتفرم (cross platforms)، از سرعت و پرفرمنس بالایی برخوردار باشه اومد سراغ فلاتر Sua Musica اپی که بیش از 10 میلیون کاربر فعال تو ماه داره، بعد از استفاده از فلاتر یه آماری داده : بیش از 350 درصد افزایش رضایت بیش از 13 درصد افزایش در eCPM Toyota شرکت ژاپنی تویوتا هم دنبال یه سیستمی بوده که بتونه باهاش رابط گرافیکی قدرتمندی رو ایجاد کنه و از اون سمت هم بتونه با سیستم موجود خودش رو وفق بده،بعد از استفاده از فلاترخیلی راضی بودن تا اونجایی که دانیل هال، مهندس ارشد تویوتا موتور توآمریکای شمالی دلیل اصلی موفقیت فلاتر تو شرکت رو متن باز بودن و جامع نرم افزاری قوی اون اعلام کرده خب اپ های خارجی رو بررسی کردیم؛ یه اپ دیگه ای هم هست که تو ایران با فلاتر نوشته شده که خیلی هم معروفه تلوبیون وارد توضیحات بیشتر نمیشیم، اپیه که معروفه و خیلی ازش استفاده میکنن، یه جمله ای از طرف برنامه نویسش میزارم فقط : "این پروژه چالش واقعا بزرگی برای من بود و از طرفی ریسک زیادی هم داشت، چون تا به حال هیچ برنامه ای در ایران با 14 میلیون نصب فعال، با فریمورک نوپایی مثل فلاتر پیاده سازی نشده بود."
مهدی نعمتی
ویجت Expanded در فلاتر
امروز هم میخوایم یه ویجت خیلی کاربردی رو معرفی کنیم، ویجتی که میتونه جای خالی رو پر کنه ! قبلا در رابطه با ویجت های Column ( لینک معرفی ) و ویجت Row ( لینک معرفی ) صحبت کردیم و دیدیم که چجوری کار میکنن و واسه چه کاری به وجود اومدن. مثلا برای ویجت Row اگه بخوایم ببینیم چیکار میکنه، اینجوریه که اگه کدی شبیه به زیر داشته باشیم Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ MyWidget(), MyWidget(), MyWidget(), ], ), خروجی شبیه به زیر رو خواهیم داشت : تو یه سری از سناریو ها پیش میاد که ما نیاز داشته باشیم یه ویجتی بیاد کل فضای خالی رو برای خودش بگیره ، مثلا تو تصویر بالا به جای اینکه آیتم وسط دو طرفش خالی باشه، کل فضای خالی رو برای خودش بگیره، تو این حالت میتونیم از ویجت Expanded استفاده کینم. به کد زیر دقت کنید : Row( children: [ MyWidget(), Expanded( child: MyWidget(), ), MyWidget(), ], ), با توجه به این کد ما خروچی شبیه به این رو خواهیم گرفت : ما وامدیم تو ویجت Row توضیح دادیم و نشون دادیم چجوری قرار میگیره، تو ویجت Column هم شرایطی دقیقت مثل همین ویجت Row را خواهیم داشت و هیچ تفاوتی نداره. حالا بعضی مواقع پیش میاد که ما دو تا از ویجت های ما باید فضای خالی رو پر کنند که میتونیم دو تا ویجت Expanded استفاده کنیم، یا مواردی هم پیش میاد که جای خالی موجود نباید به صورت مساوی بین ویجت های Expanded تقسیم بشه، تو این حالت ما میتونیم از پراپرتی flex استفاده کنیم و مقدار را برای آن تنظیم کنیم، به کد زیر دقت کنید : c hildren: [ MyWidget(), Expanded( flex: 2, child: MyWidget(), ), MyWidget(), Expanded( flex: 1, child: MyWidget(), ), ], ), خروجی کد بالا به شکل زیر خواهد بود : با توجه به کد و خروجی مشخصه که ویجتی که پراپرتی flex با مقدار 2 را گرفته دو برابر فضا را نسبت به ویجتی که پراپرتی flex با مقدار 1 را گرفته اشغال کرده است.
مهدی نعمتی
کم کردن حجم اپلیکیشن فلاتر
برای اینکه حجم اپلیکیشن فلاتری ما کمتر بشه یه یه سری نکاتباید عمل کرد، تو این مطلب برخی از از این نکات رو بهتون میگم: خروجی گرفتن برای معماری های پردازنده های مختلف تو حالت پیشفرض برای خروجی از دستور flutter build apk استفاده میکنیم، این دستور یه فایل خروجی بهمون میده که ترکیبی از سه نوع معماری مختلف : armeabi-v7a arm64-v8a x86_64 هر سه معماری با هم داخل یه فایل apk قرار میگیره و باعث میشه حجم فایل ما خیلی زیاد بشه و از طرفی هم تقریبا همه موبایل ها هم از v7a پشتیبانی میکنند و میشه فقط یه خروجی با همین معماری گرفت و حجم فایل رو خیلی کم کرد، برای این کار دستور flutter build apk --split-per-abi رو میشه استفاده کرد تا موقع بیلد گرفتن سه تا فایل apk از هم جدا بشن و بشه انتخاب کرد کدوم فایل رو به استور ها یا مشتری ها فرستاد. استفاده ازآیکون های SVG به جای عکس به جای استفاده از آیکون با فرمت عکسی میشه از svg استفاده کرد که هم حجم کمتری داره و هم تو اندازه های مختلف کیفیت خودش رو حفظ میکنه، برای استفاده از svg هم پکیج بسیار خوبی به نام flutter_svg وجود داره که میشه به راحتی ازش استفاده کرد. استفاده از فرمت WEBP به جای JPG/PNG برای عکس ها این فرمت خیلی شبیه به فرمت عکس های عادی هست ولی با این تفاوت که حدودا 25 درصد حجم کمتری داره. بهینه سازی آیکون های svg موقع گرفتن خروجی با نرم افزار های مختلف امکان بهینه سازی فایل svg وجود داره، که باعث میشه حجم این فایل ها کمتر بشه. کم کردن حجم عکس های مورد استفاده استفاده با عکس های با کیفیت خوبه و کیفیت کار رو بالا میبره ولی میشه حجم عکس ها روبدون اینکه از کیفیت اون ها کم بشه تا حجم زیادی کم کرد، برای این کار میشه از نرم افزارهای مختلف حجم عکس ها رو کم کرد یا با استفاده از سایت هایی مثل tinypng هم بدون نرم افزار خاصی حجم عکس ها رو پایین آورد. فشرده سازی اطلاعات با استفاده از gzip فشرده سازی اطلاعات هم نقش مهمی تو کم شدن حجم فایل ها داره، با استفاده از gzip میشه فشرده سازی خوبی رو این فایل ها انجام داد. تو این لینک میتونید ببینید چجوری 1300000 بایت اطلاعات تبدیل شده به 2572 بایت با فشرده سازی 99 درصدی ! استفاده از پکیج برای فونت های گوگل با استفاده از پکیج google_fonts وقتی که از یه فونت استفاده بشه فقط همون فونت به صورت خودکار دانلود میشه
مهدی نعمتی
مقایسه دو نوع مختلف دیتابیس در فلاتر
انتخاب دیتابیس مناسب برای مدیریت اطلاعات و دیتا امری بسیار مهم است که با انتخاب روش و نوع مناسب با پروژه میتواند سرعت، کارایی و مقیاس پذیری (scalability) را افزایش دهد. انتخاب دیتابیس با توجه به ساختار پروژه متفاوت می باشد و با توجه به شرایط پروژه باید نوع مناسب با آن را انتخاب کرد. تو پروژه های فلاتر هم روش ها و دیتابیس های مختلفی وجود داره که تو این مطلب ما دو نوع دیتابییس رابطه ای و غیر رابطه ای به همراه بهترین پکیج های موجود را برای استفاده به صورت محلی (locally) بررسی خواهیم کرد. Sqflite پلاگینی از SQLite که از مشهورترین و قدیمی ترین دیتابیس ها است که برای فلاتر با نام Sqflite عرضه شده است. SQLite در آگوست سال 2000 ساخته شده که به صورت cross-platform یا چند سکویی باشد تا بدون هیچ مشکلی در سیستم های 32 و 64 بیتی بتواند کار کند. این پکیج از iOS , Android و MacOS پشتیبانی میکند و از نوع دیتابیس رابطه ای می باشد (relational database). از ویژگی های بسیار مهم این این پکیج می توان به پشتیبانی عالی از تراکنش ها، چک شدن خودکار ورژن ها در هنگام ثبت اطلاعات و پشتیبانی از نخ ها در بکگراند (background thread) می باشد. برای باز کردن دیتابیس و یا افزودن تیبل به دیتابیس موجود از دستورات زیر استفاده می شود، همچنین اگر دیتابیس موجود هم نبود میتوان دستورات ساخت دیتابیس را هم به آن اضافه کرد : برای افزودن سطری از اطلاعات به جدول می تواند از دستور زیر استفاده کرد: برای ویرایش اطلاعات: همینطوری که تو کد ها مشخصه ساختار دستورات ارتباط با دیتابیس بسیار شبیه به SQL می باشد. استفاده در ویندوز و یا لینوکس هم پکیجی با اسم sqflite_common_ffi برای آن ساخته شده که میتوان از آن استفاده کرد. hive به جرات میتوان گفت پر قدرت ترین و سریع ترین دیتابیس NoSQL موجود در فلاتر این پکیج است. پکیجی که با تمامی پلتفرم ها از جمله وب کامل سازگار بوده و مشکلی در استفاده از آن وجود تدارد. با سرچی ساده هم میتوان به قدرت بالای این دیتابیس پی برد که نمودارهای خواندن و نوشتن این دیتابیس در مقابل سایر دیتابیس ها بسیار بهتر می باشد. هم چنین قابلیت رمزنگاری دیتا به صورت داخلی در این دیتابیس فراهم شده است. ثبت اطلاعات در این دیتابیس به شکل زیر و بسیار ساده می باشد : برای کار با این دیتابیس نیاز به استفاده از await وجود ندارد، که کار با این دیتابیس را بسیار ساده تر میکند. چند تفاوت در ساختار پایگاه داده رابطه ای و غیر رابطه ای : پایگاه داده رابطه ای با عنوان RDBMS شناخته می شوند و دیتابیس های NoSQL به عنوان بانک اطلاعاتی غیر رابطه ای و توزیع شده شناخته می شود. پایگاه داده SQL داده ها را به صورت جدول و ستون ذخیره می کند، این درحالیست که ذخیره سازی در پایگاه داده NoSQL مبتنی بر key-valueها است. مقیاس پذیری در پایگاه داده رابطه ای سخت تر است و تقریبا نیاز دارد که کلیت پایگاه داده را تغییر داد، ولی تغییر دادن و توسعه یک بانک اطلاعاتی در پایگاه داده NoSQL بسیار روند آسان تری دارد. در انتهای کار، نمیتوان گفت کدام نوع از دیتابیس های رابطه ای و یا غیر رابطه ای بهتر از دیگری است و باید با توجه به ساختار پروژه یکی از این دو نوع دیتابیس را انتخاب کرد.
مهدی نعمتی
چند زبانه کردن پروژه های فلاتر
به جای اینکه اپ فلاتر ما یه زبان داشته باشه میشه به راحتی با چند خط کد بیشتر و یه پکیج کاری کرد چندتا زیان دیگه هم به پروژه اضافه بشن. پکیج easy_localization که یکی از پرطرفدار ترین پکیج ها هم هست کار چند زبانه کردن رو برای به ساده ترین روش ممکن انجام میده. با استفاده از این پکیج می تونیم به راحتی برای بسیاری از زبان ها ترجمه انجام بدیم و با استفاده از Easy Localization Loader هم می تونیم ترجمه ها را در اشکال مختلفی از فایل ها مانند JSON، CSV، YML، XML ذخیره کنیم. مراحل کار رو قدم به قدم به صورت زیر انجام میدیم: 1. پکیج رو به pubspec.yaml خود اضافه می کنیم 2. یک پوشه با ساختار زیر ایجاد کنید و فایل های ترجمه رو داخلش اضافه کنید به عنوان مثال، در این مورد، ما 3 فایل با نام های زیر ایجاد می کنیم: en-US.json es-ES.json fa-IR.json مرجله بعدی یه فایل جیسون هم اسم با مواردی که میخوایم تو پوشه زبان اضافه میکنیم و این فایل جیسون به صورت کلید و مقدار هست 4 - فایل های ترجمه رو به pubspec.yaml معرفی میکنیم 5 - به کار گرفتن زبان ها 6 - و در مرحله آخر استفاده از زبان استفاده از این پکیج خیلی ساده هست و میشه تا بینهایت زبان به برنامه های خودمون اضافه کنیم لینک پکیج هم اینجاست