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

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

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

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

برای اینکار یک پوشه به اسم دلخواه ایجاد کنید و فایل های فونت خودتون و داخل آن کپی کنید. برای مثال

 awesome_app/
  fonts/
    Raleway-Regular.ttf
    Raleway-Italic.ttf
    RobotoMono-Regular.ttf
    RobotoMono-Bold.ttf

حالا بعد از وارد کردن فونت ها سراغ فایل 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'),
);

کنکور