خصائص عنصر النص في فلاتر Flutter text widget properties

استكشاف خصائص عنصر النص في Flutter:

تعلم كيفية تخصيص مظهر النص بشكل فعال لتحسين تصميم تطبيقاتك باستخدام خصائص عنصر النص في Flutter.

 مقدمة  حول خصائص عنصر النص في Flutter:

 استكشاف خصائص عنصر النص في Flutter

عنصر النص (Text) يعتبر أحد العناصر الأساسية في بناء واجهات المستخدم في تطبيقات Flutter. يوفر عنصر النص العديد من الخصائص التي يمكن تخصيصها لتناسب احتياجات التصميم المختلفة، مثل تحديد لون النص، وحجمه، ووزنه، وغيرها الكثير.

في هذا الدرس، سنقوم باستكشاف مجموعة من خصائص عنصر النص في Flutter وكيفية استخدامها بشكل فعال في تخصيص مظهر النص في التطبيقات. سنتعرف على كل خاصية بشكل مفصل وسنقدم أمثلة توضيحية تساعد في فهم طرق استخدامها.

من خلال هذا الدرس، ستكتسب المعرفة اللازمة لاستخدام خصائص عنصر النص بشكل فعال لتحسين تصميم واجهات التطبيقات في Flutter.

هيا نبدأ في استكشاف خصائص عنصر النص وكيفية استخدامها في تطوير التطبيقات بواسطة Flutter.

خصائص Flutter text widget

يُعد ويدجت “Text” في Flutter مسؤولاً عن عرض نص داخل واجهة المستخدم. وتشمل خصائصه الرئيسية ما يلي:

النص (text): تُعرف النص المعروض داخل الويدجت باستخدام هذه الخاصية.

تنسيق النص (style): يمكن تخصيص مظهر النص بشكل شامل باستخدام هذه الخاصية، مثل اللون والحجم ونوع الخط والتنسيقات الأخرى.

تحديد اتجاه النص (textAlign): يمكن تحديد اتجاه النص، مثل اليمين، اليسار، الوسط، أو اليمين مع اليسار.

تحديد اتجاه الكتابة (textDirection): يمكن تحديد اتجاه الكتابة للنص، مثل الكتابة من اليمين إلى اليسار أو من اليسار إلى اليمين.

تحديد عدد الأسطر (maxLines): يُحدد عدد الأسطر المسموح بها لعرض النص. إذا تم تجاوز هذا العدد، يتم عرض نقط الفصل (ellipsis) أو القصاصات (clip) حسب التكوين.

تكرار النص (overflow): تُعرف كيفية التصرف عندما يتم تجاوز عدد الأسطر المسموح به. يمكن لهذه الخاصية أن تكون تصرفات مثل القصاص (clip) أو عرض نقاط الفصل (ellipsis).

التموضع (textAlignVertical): يحدد موقع النص داخل الحاوية الرئيسية للويدجت، مثل الأعلى، الوسط، أو الأسفل.

تكبير النص بالتوسيع (textScaleFactor): يُعدل هذا العامل حجم النص بناءً على نسبة محددة.

تحديد التوجيه الأساسي للنص (locale): يحدد اللغة والثقافة المستخدمة في تحديد خصائص النص مثل الاتجاه واختيار الخطوط.

هذه بعض الخصائص الرئيسية لويدجت “Text” في Flutter، التي توفر مرونة كبيرة في عرض النص وتخصيص مظهره بشكل دقيق.

تطبيق خطوة بخصوة عن استخدام Flutter text widget properties

بالطبع، دعني أقدم لك مثالًا بسيطًا مع توضيح خطوة بخطوة لكيفية استخدام بعض خصائص ويدجت “Text” في Flutter:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Text Widget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// يستخدم ويدجت Text لعرض النص
Text(
'مرحبًا بالعالم',
// تحديد تنسيق النص
style: TextStyle(
color: Colors.blue, // لون النص
fontSize: 24.0, // حجم النص
fontWeight: FontWeight.bold, // وزن النص
),
// تحديد اتجاه النص
textAlign: TextAlign.center,
// تحديد عدد الأسطر
maxLines: 1,
// تحديد تصرف تكرار النص
overflow: TextOverflow.ellipsis,
),
SizedBox(height: 20), // فارغ لإضافة بعض المسافة بين النص والأسفل
// يمكن استخدام خاصية التموضع لتحديد موقع النص داخل الحاوية
Text(
'مرحبًا بالعالم',
style: TextStyle(
color: Colors.red,
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
// تحديد التموضع للنص
textDirection: TextDirection.rtl,
),
],
),
),
),
);
}
}

 شجرة التطبيق مع الشرح

MaterialApp
└─ Scaffold
├─ AppBar
│ └─ Text
└─ Center
└─ Column
├─ Text
└─ SizedBox
└─ SizedBox
└─ Text

الشجرة تبين تنظيم الويدجتات داخل التطبيق، حيث:

MaterialApp هو العنصر الجذري للتطبيق.
Scaffold يوفر هيكل الصفحة بما في ذلك AppBar وجسم الصفحة.
AppBar يحتوي على عنوان التطبيق.
Center يقوم بتوسيط عناصره الفرعية أفقياً ورأسياً داخل الشاشة.
Column يسمح بترتيب العناصر الفرعية بشكل عمودي.
Text هي ويدجت لعرض النص.
SizedBox يسمح بتحديد حجم محدد للفراغ بين العناصر.
هذه الشجرة توضح كيف تنظم الويدجتات في تطبيق Flutter لتصميم وتنظيم واجهة المستخدم.

تشغيل التطبيق :

قمنا بنسخ الكود وتجربته على موقع مفسر فلاتر أون لاين فكانت النتية:

تطبيق 2 على استخدام خصائص النص في فلاتر مع الشرح خطوة بخطوة

سنقوم بإنشاء تطبيق بسيط يستخدم خصائص النص في Flutter. سنقوم بإنشاء تطبيق يقوم بعرض نصين مع تخصيصات مختلفة. 

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('تطبيق خصائص النص'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'مرحبًا بالعالم',
style: TextStyle(
fontSize: 24.0,
color: Colors.blue,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
),
),
SizedBox(height: 20),
Text(
'مرحبًا بالعالم',
style: TextStyle(
fontSize: 20.0,
color: Colors.red,
letterSpacing: 2.0,
decoration: TextDecoration.underline,
decorationColor: Colors.green,
decorationStyle: TextDecorationStyle.wavy,
),
),
],
),
),
),
);
}
}

شرح الكود:

في البداية، نقوم بإنشاء تطبيق Flutter الأساسي مع MaterialApp و Scaffold.

في AppBar، نعرض عنوانًا للتطبيق.

في الجسم (Body)، نستخدم ويدجت Column لترتيب العناصر عموديًا.

داخل العمود، نستخدم ويدجت Text لعرض النص.

لكل Text ويدجت، نقوم بتخصيص خصائص النص مثل الحجم، اللون، الوزن، وغيرها.

في النص الأول، قمنا بتحديد حجم الخط بـ 24 وتلوينه باللون الأزرق وجعله عريضًا ومائلًا.

في النص الثاني، قمنا بتحديد حجم الخط بـ 20 وتلوينه باللون الأحمر وزيادة المسافة بين الحروف وتحته خط تحته ذو لون أخضر ونمط موجي.

هذا التطبيق يوضح كيف يمكن استخدام خصائص النص في Flutter لتخصيص مظهر النص وجعله يتناسب مع احتياجات تطبيقك.

إضافة خصائص أخرى:

 سنقوم بإضافة بعض الخصائص الإضافية للنصوص في التطبيق. سنضيف خاصيتين جديدتين: خاصية letterSpacing للنص الأول وخاصية lineHeight للنص الثاني. دعونا نقوم بذلك:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('تطبيق خصائص النص'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'مرحبًا بالعالم',
style: TextStyle(
fontSize: 24.0,
color: Colors.blue,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
letterSpacing: 1.5, // إضافة مسافة بين الحروف
),
),
SizedBox(height: 20),
Text(
'مرحبًا بالعالم',
style: TextStyle(
fontSize: 20.0,
color: Colors.red,
letterSpacing: 2.0,
decoration: TextDecoration.underline,
decorationColor: Colors.green,
decorationStyle: TextDecorationStyle.wavy,
height: 2.0, // تحديد ارتفاع السطر
),
),
],
),
),
),
);
}
}

في هذا التعديل، قمت بإضافة خاصية letterSpacing للنص الأول لزيادة المسافة بين الحروف، وخاصية height للنص الثاني لتحديد ارتفاع السطر.

تحتوي الخاصية letterSpacing على قيمة موجبة لزيادة المسافة بين الحروف، ويمكن أن تكون سالبة لتقليل المسافة بين الحروف.

أما خاصية height فتحدد ارتفاع السطر، حيث أن القيمة الافتراضية هي 1.0، والقيمة الأعلى تجعل السطر أعلى، والقيمة الأقل تجعل السطر أقل.

تشغيل التطبيق:

تطبيق 2 عن استخدام خصائص عنصر النص في فلاتر

 سأقوم بإنشاء مشروع Flutter متكامل يستخدم خصائص عنصر النص بشكل مفصل. في هذا المشروع، سنقوم بعرض نصين مع تخصيصات مختلفة مثل اللون، الحجم، التنسيق، وغيرها. يمكنك اتباع الخطوات التالية لإنشاء وتشغيل هذا المشروع:

نقم بفتح محرر النصوص المفضل لديك وإنشاء مشروع Flutter جديد. يمكنك القيام بذلك باستخدام سطر الأوامر وتشغيل الأمر التالي:

flutter create flutter_text_properties_example
بعد إنشاء المشروع، انتقل إلى دليل المشروع باستخدام الأمر التالي:

cd flutter_text_properties_example
استبدل محتوى ملف lib/main.dart بالكود التالي:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Text Properties Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'مرحبًا بالعالم',
style: TextStyle(
fontSize: 24.0,
color: Colors.blue,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
letterSpacing: 1.5, // زيادة المسافة بين الحروف
),
),
SizedBox(height: 20),
Text(
'مرحبًا بالعالم',
style: TextStyle(
fontSize: 20.0,
color: Colors.red,
letterSpacing: 2.0, // زيادة المسافة بين الحروف
decoration: TextDecoration.underline,
decorationColor: Colors.green,
decorationStyle: TextDecorationStyle.wavy,
height: 2.0, // تحديد ارتفاع السطر
),
),
],
),
),
),
);
}
}

قم بحفظ الملف.

الآن، قم بتشغيل التطبيق على محاكي الجهاز أو جهازك الفعلي باستخدام الأمر التالي:

flutter run
بهذه الخطوات، يجب أن تكون قد أنشأت مشروع Flutter يستخدم خصائص عنصر النص بشكل مفصل، ويقوم بعرض نصين بتخصيصات مختلفة مثل اللون، الحجم، التنسيق، وغيرها.

اختبار مع الشرح على خصائص ودجت  النص في فلاتر

سنقوم بإنشاء اختبار (Quiz) بسيط يتعلق بخصائص عنصر النص في Flutter. الاختبار سيتألف من عدة أسئلة متعلقة بهذا الموضوع، مع شرح لكل سؤال.

Quiz: خصائص عنصر النص في Flutter

1-ما هي وظيفة خاصية fontSize في عنصر النص في Flutter؟

تحديد لون النص.
تحديد حجم النص.
تحديد نوع الخط.
تحديد تنسيق النص.
شرح: الخاصية fontSize تستخدم لتحديد حجم النص المعروض.

2-ما هي الخاصية التي تُستخدم لتحديد لون النص في Flutter؟

color
fontStyle
letterSpacing
fontWeight
شرح: الخاصية التي تستخدم لتحديد لون النص هي color.

3-ما هي الخاصية التي تُستخدم لجعل النص عريضًا في Flutter؟

letterSpacing
fontSize
decoration
fontWeight
شرح: الخاصية التي تُستخدم لجعل النص عريضًا هي fontWeight.

4- ما هي الخاصية التي تُستخدم لزيادة المسافة بين الحروف في النص؟

decoration
fontSize
letterSpacing
fontStyle
شرح: الخاصية التي تُستخدم لزيادة المسافة بين الحروف هي letterSpacing.

5- ما هي الخاصية التي تُستخدم لتحديد نمط الزخرفة للنص في Flutter؟

fontStyle
fontWeight
decoration
letterSpacing
شرح: الخاصية التي تُستخدم لتحديد نمط الزخرفة للنص هي decoration.