flutter_custom_fonts تنزيل - flutter_custom_fonts تنزيل رمز المصدر

flutter_custom_fonts

تحميل الخط

1.0.0

تنزيل

flutter_custom_fonts

كيفية إضافة خطوط مخصصة في رفرفة

مقدمة:

في هذه المقالة سوف نتعلم كيفية إضافة خطوط مخصصة في تطبيق Flutter. سنضيف خطوط .ttf في هذا المثال. توفر خطوط Google خطوطًا مجانية حتى سنقوم بتنزيل الخطوط من هناك. سوف نضيف Pacifico و Robotocondensed Fonts في هذا المثال. لذلك دعونا نضيف خطوط مخصصة في تطبيق Flutter في مثال أدناه.

الإخراج:

خطوات:

الخطوة 1: الخطوة الأولى والأساسية لإنشاء تطبيق جديد في رفرفة. إذا كنت مبتدئًا في الرفرفة ، فيمكنك التحقق من مدونتي إنشاء تطبيق أولي في Flutter. لقد قمت بإنشاء تطبيق اسمه "flutter_custom_fonts".

الخطوة 2: الآن ، قم بتنزيل الخطوط من Fonts Google أو من موقع آخر ووضع مشروع الخطوط. قم بإنشاء مجلد اسمه "الخطوط" ضمن دليل جذر المشروع ووضع الخطوط في هذا المجلد. تحقق من لقطة الشاشة لمزيد من الفهم.

الخطوة 3: الآن تكوين الخطوط في ملف PubSpec.yaml. ملف pubspec.yaml هو ملف التكوين للمكونات الإضافية والخطوط والصور وما إلى ذلك. تحقق من الرمز أدناه الذي تحتاج إلى تكوينه في ملف pubspec.yaml الخاص بك.

 fonts:
   - family: Pacifico
     fonts:
       - asset: fonts/Pacifico-Regular.ttf
   - family: RobotoCondensed
     fonts:
       - asset: fonts/RobotoCondensed-Regular.ttf
       - asset: fonts/RobotoCondensed-Bold.ttf
         weight: 700

الخطوة 4: الآن في ملف main.dart ، سنستخدم الخطوط لتصميم نصنا. فيما يلي تنفيذ البرمجة لذلك.

 import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.purple,
     ),
     home: MyHomePage(),
   );
 }
}
 
class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Flutter Custom Fonts'),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             'Pacifico Regular',
             style: TextStyle(
                 fontFamily: 'Pacifico', fontSize: 32.0, color: Colors.purple),
           ),
           Text(
             'Pacifico Bold',
             style: TextStyle(
                 fontFamily: 'Pacifico',
                 fontWeight: FontWeight.bold,
                 fontSize: 32.0,
                 color: Colors.purple),
           ),
           Text(
             'RobotoCondensed Regular',
             style: TextStyle(
                 fontFamily: 'RobotoCondensed', fontSize: 32.0, color: Colors.purple),
           ),
           Text(
             'RobotoCondensed Bold',
             style: TextStyle(
                 fontFamily: 'RobotoCondensed',
                 fontWeight: FontWeight.w700,
                 fontSize: 32.0,
                 color: Colors.purple),
           ),
         ],
       ),
     ),
   );
 }
}

هيرري ... قم بتشغيل التطبيق واختبره على المحاكي/المحاكاة أو الجهاز :)))

خاتمة:

لقد تعلمنا أن كيفية إضافة خطوط مخصصة في تطبيق الرفرفة. هناك ثلاث خطوات لذلك 1. قم بتنزيل الخطوط ووضعها في Fonts Folder 2. قم بتكوين الخطوط في ملف PubSpec.yaml و 3. استخدم الخطوط لتصميم النص.