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

یکی از عوامل زیبا کردن طراحی اپلیکیشن فونت های مورد استفاده در آن می باشد, معمولا هر فریموورکی یک سری فونت های پیش فرض برای استفاده دارند اما فونت ها هیچکدام فارسی نیستند متاسفانه.
در این مقاله با هم دیگه بررسی میکنیم که چطور میتونیم از فونت های خودمون داخل پروژه های فلاتر ( 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'),
);
درباره Hesam
حسام رسولیان هستم فارغ التحصیل رشته IT و موسس وبسایت فلاتر لرن - وبسایت شخصی: AtysCode.ir
نوشته های بیشتر از Hesam2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام. عذر میخوام من همین کار رو کردم و مراقب فاصله ها بودم ولی فونت اعمال نیمشه…
ممنون میشم راهنمایی کنید.
سلام پکیج به درستی ایمپورت شده؟