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

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

خب اول از همه باید فونت های خودمون و وارد پروژمون کنیم.

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

 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 استفاده کنید.

 Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),
);

کنکور