استفاده از این محتوا رایگان میباشد

چارا برای خلق ارزش و توسعه مهارت های درونی و رشد استعدادها و جایی برای انجام پروژهای برنامه نویسی هست، هدف ما پیاده سازی ایده شما و توسعه مهارت های فردی کاربران برای ارتقا و اجرای هدفمندانه کسب و کارها میباشد بیشتر آموزش های سایت به صورت رایگان در اختیار شما هستند اما برای دسترسی به همه آموزش ها نیازمند تهیه عضویت ویژه سایت ما میباشید.

نحوه استفاده از Fonticon در فلاتر ( بخش 13 ) ❤️

نحوه استفاده از Fonticon

استفاده از فونت آیکن اختصاصی در flutter

نحوه استفاده از Fonticon در فلاتر چه طوری به من کمک میکنه؟

تا بتونم از یه سری آیکن هایی که خودم طراحی کردم توی پروژه ها استفاده کنم؟

آیکن های پیش فرض فلاتر

حتی اگه Flutter توی خودش طیف وسیعی از آیکون ها رو داشته باشه بازم برای یه پروژهایی ما نیاز داریم

آیکن هایی با ظرافت خاص برای اپلیکیشن ها مون طراحی کنیم و کاملا اختصاصی باشن کل آیکن های استفاده شده.

مهم هست که آیکن ها خاصیت برداری داشته باشن نه پیکسلی مثل تصاویر PNG و …

که کاملا اشتباه هست استفاده از تصاویر PNP به عنوان آیکن در اپلیکیشن ها.

نمایش آیکن ها به صورت کاملا بهینه


تکنولوژی فلاتر

حالا مسئله ای که وجود داره اینه که ما برای اینکه بتونیم آیکن ها رو به بهینه ترین شکل ممکن توی اپ نمایش بدیم.

باید از fonticon ها استفاده کنیم دقیقا مثل خود فلاتر که یه سری آیکن توی خودش داره.نحوه استفاده از Fonticon رو توی این آموزش داریم

و به همین شکل ما ازشون استفاده میکنیم.

که گفتم ممکنه بخوایم ما از آیکن های اختصاصی خودمون استفاده کنیم خب حالا راه حل چیست


توی مرحله اول میتونیم وارد سایت هایی مثل flaticon و یا vecteezy بشیم.

و از آیکن های آدمادشون استفاده کنیم که میتونیم

با پسوند ai و یا svg اونها رو دانلود کنیم ( دقت کنید که حتما باید به صورت وکتور اونها رو دانلود بکنید )

نحوه استفاده از Fonticon در فلاتر- نمایی از سایت فلت آیکن

بعد از اینکه پک آیکن های خودتون و انتخاب کردید

میتونید این پک رو در نرم افزار Adobe illustrator و یا نرم افزاهای دیگه ویرایش فایل های وکتور مثل Inkscape استفاده کنید و ویرایش کنید.

ما فرض میکنیم آیکن های خودتون رو ویرایش کردید

و حالا آماده استفاده هستن خب در این مرحله کافیه یه خروجی svg از آیکن بگیرید.

و این خروجی رو ببرید توی سایت icomoon و اون فایل svg خروجی رو اینجا ایمپورت کنید طبق تصویر زیر:

نحوه استفاده از Fonticon و نحوه ایمپورت فایل SVg

توی این مرحله که فایل svg آیکن ها رو ایمپورت کردید حالا باید دکمه Generate Font و بزنید طبق تصویر زیر:

نحوه دانلود فایل زیپ از سایت icomoon

نحوه استفاده از آیکن ها در پروژه فلاتر

برای اینکه ما بتونیم از آیکن ها استفاده کنیم فایل zip که سایت icomoon داده رو دانلود و باز کنید

اون رو در هر کجا که دوست دارید استخراج کنید فایل ttf رو کپی کنید.

برای من به طور پیش فرض “icomoon.ttf” هست اسمش از پوشه fonts اون رو بردارید

و در پوشه پروژه flutter خودتون جاگذاری کنید من یه پوشه به اسم”fonts” رو توی دایرکتوری اصلی پروژه ایجاد کردم و فایل icomoon.ttf رو اونجا جای گذاری کردم.

حالا باید فایل pubspec.yaml خودمون رو باز کنیم و به این صورت fonts / icomoon.ttf فونت آیکن خودمون رو به pubspec.yaml اضافه میکنیم.

نحوه قرار دادن فونت در pubspec.yaml

نحوه استفاده از آیکن ها در برنامه

فقط کافیه کد زیر رو ایجاد کنید تا یک IconData Object جدید ایجاد بشه ، می تونید از اون برای ایجاد یه Icon جدید در فلاتر استفاده کنید.

const IconData(0xe9a9, fontFamily: ‘icomoon’);

به جای 0xe9a9 میتونید اسم آیکن پیدا کنید و از آیکن مورد نظر استفاده کنید طبق تصویر زیر :

نحوه استفاده از Fonticon در فلاتر-نمایش نام آیکن ها

در ادامه برای اینکه بتونید از آیکن ها و … در فلاتر استفاده کنید کافیه این بخش از آموزش ها رو ببینید.

این روش فوقالعاده بهینه و با کیفیت هست !

دوستانی که b4a کار میکنن کافیه یه متغییر از نوع Typeface تعریف کنید توی Global و این فایل icomoon.ttf و بهش بدید و هر جایی خواستید ازش استفاده کنید، هر کسی هر روش دیگه ای و امتحان کنه مثل این آموزش بهینه نخواهد بود چون حجم هر آیکن در این صورت به کیلوبایت هم نمیرسه و بایت هست و کیفیت آیکن ها هم بی نهایت بالا و برداری هست موفق باشید.

جهت برسی همه بخش های آموزش ها کلیک کنید

نحوه کار با StatefulWidget در فلاتر (بخش 12 ) ❤️
آموزش کار با ویجت column-widget در فلاتر ( بخش 14 ) ❤️
, , , ,

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این قسمت نباید خالی باشد
این قسمت نباید خالی باشد
لطفاً یک نشانی ایمیل معتبر بنویسید.
شما برای ادامه باید با شرایط موافقت کنید

فهرست