یکی از عوامل زیبا کردن طراحی اپلیکیشن فونت های مورد استفاده در آن می باشد.
معمولا هر فریموورکی یک سری فونت های پیش فرض برای استفاده دارند اما فونت ها هیچکدام فارسی نیستند و برای اپلیکیشن هایی که برای کاربران فارسی زبان یا حتی عربی زبان طراحی میشود کاربرد زیادی ندارند. به همین دلیل باید از فونت های مختلف که مخصوص این زبان ها هستند در پروژه استفاده کنیم.
در این مقاله با هم دیگه بررسی میکنیم که چطور میتوانیم از فونت های خودمون داخل پروژه های فلاتر ( Flutter) استفاده کنیم.
استفاده از فونت‌ها در اپلیکیشن‌ها تأثیرات مختلفی را در نمایش و ظاهر اپلیکیشن به ارمغان می‌آورد. این تأثیرات می‌توانند روی تجربه کاربری، خوانایی محتوا، و حتی شناخت برند و هویت اپلیکیشن تأثیر بگذارند. در زیر به برخی از تأثیرات استفاده از فونت در اپلیکیشن‌ها اشاره می‌کنم:
در نهایت، انتخاب فونت‌ها و استفاده از آن‌ها باید با دقت و اهمیت مورد بررسی و تصمیم‌گیری قرار گیرد. تأثیرات مثبت و منفی استفاده از فونت‌ها بستگی به نحوه‌ی انتخاب، استفاده، و هماهنگی آن‌ها با بقیه ظاهر اپلیکیشن دارد و باید با دقت و تجربه کاربری در نظر گرفته شوند.
خب اول از همه باید فونت های خودمون و وارد پروژمون کنیم. در واقع هر فایل خارجی که نیاز داریم تا در برنامه از آن استفاده کنیم باید به عنوان assets به برنامه معرفی شوند.
برای اینکار یک پوشه به اسم دلخواه ایجاد کنید و فایل های فونت خودتون و داخل آن کپی کنید. برای مثال
awesome_app/
fonts/
Raleway-Regular.ttf
Raleway-Italic.ttf
RobotoMono-Regular.ttf
RobotoMono-Bold.ttf
حالا بعد از وارد کردن فونت ها سراغ فایل pubspec.yaml میریم.
فایل pubspec.yaml یکی از فایل‌های مهم و اساسی در پروژه‌های فلاتر است.
این فایل در ریشه‌ی پروژه قرار دارد و اطلاعات مهمی مانند وابستگی‌ها (dependencies)، منابع (assets) و تنظیمات پروژه را شامل میشود.
فایل pubspec.yaml به طور کلی برای مدیریت و تنظیم پروژه‌ها در فلاتر استفاده میشود.
در اینجا مثل وارد کردن عکس های پروژه باید فونت هامون را هم وارد کنیم.
flutter:
fonts:
- family: Raleway
fonts:
- asset: fonts/Raleway-Regular.ttf
- asset: fonts/Raleway-Italic.ttf
style: italic
- family: RobotoMono
fonts:
- asset: fonts/RobotoMono-Regular.ttf
- asset: fonts/RobotoMono-Bold.ttf
weight: 700
به شکل بالا ابتدا از کلمه fonts استفاده می کنیم و بعد یک fontfamily با اسم دلخواه ایجاد میکنیم سپس فونت هایی که میخواهیم در این دسته بندی قرار بگیرند را مینویسم.
نکته مهم در کار کردن با pubspec.yaml این هست که دستورات به فاصله حساس هستند.
حالا میتونیم از فونت هایی که تعریف کردیم داخل تم برنامه استفاده کنیم که روش آن به شکل زیر می باشد. کافیست که فقط نام فونت مورد نظر را قرار دهید.
MaterialApp(
title: 'Custom Fonts',
// Set Raleway as the default app font
theme: ThemeData(fontFamily: 'Raleway'),
home: MyHomePage(),
);
اگر نیاز دارید که فونت یک ویجت خاصی را تغییر دهید بازهم میتونید از ویژگی fontfamily استفاده کنید.
برای مثال در کار با ویجت متن مواقع زیادی است که قصد داریم فونت آن را تغییر دهیم. هر ویجتی که از ویژگی fontfamily پشتیبانی کند امکان تغییر فونت را نیز دارد.
Text(
'Roboto Mono sample',
style: TextStyle(fontFamily: 'RobotoMono'),
);
سلام. عذر میخوام من همین کار رو کردم و مراقب فاصله ها بودم ولی فونت اعمال نیمشه…
ممنون میشم راهنمایی کنید.
سلام پکیج به درستی ایمپورت شده؟