استفاده از فونت دلخواه در فلاتر 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'),
);
مطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی دیتابیس ObjectBox در فلاتر
آموزش اتصال اپلیکیشن فلاتر به پرینتر بلوتوثی
آموزش پیاده سازی معماری MVVM در فلاتر
روش های افزایش امنیت اپلیکیشن در فلاتر
آموزش کار با پکیج Freezed در فلاتر
آموزش ویجت SafeArea در فلاتر
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام. عذر میخوام من همین کار رو کردم و مراقب فاصله ها بودم ولی فونت اعمال نیمشه…
ممنون میشم راهنمایی کنید.
سلام پکیج به درستی ایمپورت شده؟