استفاده از فونت دلخواه در فلاتر Flutter

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

معمولا هر فریموورکی یک سری فونت های پیش فرض برای استفاده دارند اما فونت ها هیچکدام فارسی نیستند و برای اپلیکیشن هایی که برای کاربران فارسی زبان یا حتی عربی زبان طراحی میشود کاربرد زیادی ندارند. به همین دلیل باید از فونت های مختلف که مخصوص این زبان ها هستند در پروژه استفاده کنیم.

در این مقاله با هم دیگه بررسی میکنیم که چطور میتوانیم از فونت های خودمون داخل پروژه های فلاتر ( Flutter) استفاده کنیم.

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

استفاده از فونت‌ها در اپلیکیشن‌ها تأثیرات مختلفی را در نمایش و ظاهر اپلیکیشن به ارمغان می‌آورد. این تأثیرات می‌توانند روی تجربه کاربری، خوانایی محتوا، و حتی شناخت برند و هویت اپلیکیشن تأثیر بگذارند. در زیر به برخی از تأثیرات استفاده از فونت در اپلیکیشن‌ها اشاره می‌کنم:

1. تجربه کاربری بهتر: انتخاب فونت‌های مناسب و جذاب می‌تواند تجربه کاربری کاربران را بهبود بخشد. فونت‌های مناسب می‌توانند بصریات اپلیکیشن را جذاب‌تر کنند و کاربران را به محتوا جلب کنند.
   
2. خوانایی و فهم‌پذیری: انتخاب فونت‌های قابل خواندن و فهم‌پذیر برای متن‌ها و محتواهای اپلیکیشن می‌تواند مطالب را برای کاربران قابلیت مطالعه و درک بهتری بخشد.
   
3. هویت برند و شناخت‌پذیری: استفاده از فونت‌های خاص و منحصربه‌فرد می‌تواند هویت و شناخت‌پذیری برند شما را تقویت کند و از بقیه اپلیکیشن‌ها متمایز سازد.
   
4. تأثیر روحی: فونت‌ها می‌توانند تأثیرات روحی و عاطفی مختلفی را به کاربران منتقل کنند. به عنوان مثال، فونت‌های خوش‌نما و دل‌نشین می‌توانند احساس رضایت و آرامش را به کاربران منتقل کنند.
   
5. مطابقت با موضوع اپلیکیشن: انتخاب فونت‌های مناسب با موضوع اپلیکیشن و نوع محتواها می‌تواند هماهنگی و یکپارچگی بین محتواها و ظاهر اپلیکیشن را فراهم کند.
   
6. سرعت و بهینه‌سازی: استفاده از فونت‌های مناسب و بهینه‌شده می‌تواند سرعت بارگذاری اپلیکیشن و بهبود عملکرد آن را تحت‌تأثیر قرار دهد.

در نهایت، انتخاب فونت‌ها و استفاده از آن‌ها باید با دقت و اهمیت مورد بررسی و تصمیم‌گیری قرار گیرد. تأثیرات مثبت و منفی استفاده از فونت‌ها بستگی به نحوه‌ی انتخاب، استفاده، و هماهنگی آن‌ها با بقیه ظاهر اپلیکیشن دارد و باید با دقت و تجربه کاربری در نظر گرفته شوند.

اضافه کردن فونت در فلاتر

خب اول از همه باید فونت های خودمون و وارد پروژمون کنیم. در واقع هر فایل خارجی که نیاز داریم تا در برنامه از آن استفاده کنیم باید به عنوان 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'),
);