برای اینکه حجم اپلیکیشن فلاتری ما کمتر بشه یه یه سری نکاتباید عمل کرد، تو این مطلب برخی از از این نکات رو بهتون میگم:
خروجی گرفتن برای معماری های پردازنده های مختلف
تو حالت پیشفرض برای خروجی از دستور 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 وقتی که از یه فونت استفاده بشه فقط همون فونت به صورت خودکار دانلود میشه
مطالب مرتبط
مهدی نعمتی
04/23/2022 12:17:07افزونه های 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)
مهدی نعمتی
04/22/2022 08:08:35چه شرکت هایی از فلاتر استفاده میکنن
اگه هنوز هم به قدرت فلاتر ایمان نیاوردین، تو این پست میخوایم چندتا از پروژه های خوب فلاتری که توسط شرکت های بزرگ توسعه داده شده رو بررسی کنیم تا ببینیم چقدر فلاتر میتونه قدرت داشته باشه 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 میلیون نصب فعال، با فریمورک نوپایی مثل فلاتر پیاده سازی نشده بود."
مهدی نعمتی
04/22/2022 08:08:30ویجت 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 را گرفته اشغال کرده است.
0 دیدگاه
ثبت دیدگاه
ایمیل شما نشر داده نمی شود