نحوه استفاده از Fonticon
نحوه استفاده از Fonticon در فلاتر چه طوری به من کمک میکنه؟
تا بتونم از یه سری آیکن هایی که خودم طراحی کردم توی پروژه ها استفاده کنم؟
آیکن های پیش فرض فلاتر
حتی اگه Flutter توی خودش طیف وسیعی از آیکون ها رو داشته باشه بازم برای یه پروژهایی ما نیاز داریم
آیکن هایی با ظرافت خاص برای اپلیکیشن ها مون طراحی کنیم و کاملا اختصاصی باشن کل آیکن های استفاده شده.
مهم هست که آیکن ها خاصیت برداری داشته باشن نه پیکسلی مثل تصاویر PNG و ...
که کاملا اشتباه هست استفاده از تصاویر PNP به عنوان آیکن در اپلیکیشن ها.
نمایش آیکن ها به صورت کاملا بهینه
حالا مسئله ای که وجود داره اینه که ما برای اینکه بتونیم آیکن ها رو به بهینه ترین شکل ممکن توی اپ نمایش بدیم.
باید از fonticon ها استفاده کنیم دقیقا مثل خود فلاتر که یه سری آیکن توی خودش داره.نحوه استفاده از Fonticon رو توی این آموزش داریم
و به همین شکل ما ازشون استفاده میکنیم.
که گفتم ممکنه بخوایم ما از آیکن های اختصاصی خودمون استفاده کنیم خب حالا راه حل چیست
توی مرحله اول میتونیم وارد سایت هایی مثل flaticon و یا vecteezy بشیم.
و از آیکن های آدمادشون استفاده کنیم که میتونیم
با پسوند ai و یا svg اونها رو دانلود کنیم ( دقت کنید که حتما باید به صورت وکتور اونها رو دانلود بکنید )
بعد از اینکه پک آیکن های خودتون و انتخاب کردید
میتونید این پک رو در نرم افزار Adobe illustrator و یا نرم افزاهای دیگه ویرایش فایل های وکتور مثل Inkscape استفاده کنید و ویرایش کنید.
ما فرض میکنیم آیکن های خودتون رو ویرایش کردید
و حالا آماده استفاده هستن خب در این مرحله کافیه یه خروجی svg از آیکن بگیرید.
و این خروجی رو ببرید توی سایت icomoon و اون فایل svg خروجی رو اینجا ایمپورت کنید طبق تصویر زیر:
توی این مرحله که فایل svg آیکن ها رو ایمپورت کردید حالا باید دکمه Generate Font و بزنید طبق تصویر زیر:
نحوه استفاده از آیکن ها در پروژه فلاتر
برای اینکه ما بتونیم از آیکن ها استفاده کنیم فایل zip که سایت icomoon داده رو دانلود و باز کنید
اون رو در هر کجا که دوست دارید استخراج کنید فایل ttf رو کپی کنید.
برای من به طور پیش فرض "icomoon.ttf" هست اسمش از پوشه fonts اون رو بردارید
و در پوشه پروژه flutter خودتون جاگذاری کنید من یه پوشه به اسم"fonts" رو توی دایرکتوری اصلی پروژه ایجاد کردم و فایل icomoon.ttf رو اونجا جای گذاری کردم.
حالا باید فایل pubspec.yaml خودمون رو باز کنیم و به این صورت fonts / icomoon.ttf فونت آیکن خودمون رو به pubspec.yaml اضافه میکنیم.
نحوه استفاده از آیکن ها در برنامه
فقط کافیه کد زیر رو ایجاد کنید تا یک IconData Object جدید ایجاد بشه ، می تونید از اون برای ایجاد یه Icon جدید در فلاتر استفاده کنید.
const IconData(0xe9a9, fontFamily: ‘icomoon’);به جای 0xe9a9 میتونید اسم آیکن پیدا کنید و از آیکن مورد نظر استفاده کنید طبق تصویر زیر :
در ادامه برای اینکه بتونید از آیکن ها و ... در فلاتر استفاده کنید کافیه این بخش از آموزش ها رو ببینید.
این روش فوقالعاده بهینه و با کیفیت هست !
دوستانی که b4a کار میکنن کافیه یه متغییر از نوع Typeface تعریف کنید توی Global و این فایل icomoon.ttf و بهش بدید و هر جایی خواستید ازش استفاده کنید، هر کسی هر روش دیگه ای و امتحان کنه مثل این آموزش بهینه نخواهد بود چون حجم هر آیکن در این صورت به کیلوبایت هم نمیرسه و بایت هست و کیفیت آیکن ها هم بی نهایت بالا و برداری هست موفق باشید.
جهت برسی همه بخش های آموزش ها کلیک کنید
