شرح استخدام ويدجت Text في فلاتر

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

استخدام ويدجت Text في فلاتر

يمكن استخدام ويدجت Text في Flutter بسهولة. حيث يتم تمرير النص الذي يجب عرضه كمعامل إلى الويدجت Text، كما هو موضح في الكود التالي:

Text(
  'Hello World!',
)

ستظهر عبارة “Hello World!” كنص في التطبيق. يمكن تخصيص خصائص النص باستخدام الخصائص المتاحة في ويدجت Text.

“اقرأ أيضاً: شرح استخدام ويدجت StreamBuilder في فلاتر“

خصائص ويدجت Text

يوفر ويدجت Text العديد من الخصائص التي يمكن استخدامها لتخصيص النص. سأوضح هنا كل خاصية بالتفصيل وأرفق بعض الأمثلة لتوضيح كيفية استخدامها.

1- الخاصية style

تستخدم الخاصية style لتحديد خصائص النص، مثل اللون والحجم والخط وغيرها. يمكن استخدام الخاصية style كالتالي:

Text(
  'Hello World!',
  style: TextStyle(
    color: Colors.blue,
    fontSize: 20.0,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    fontFamily: 'Roboto',
  ),
)

في هذا المثال، تم تحديد لون النص باللون الأزرق، وتم زيادة حجم الخط إلى 20 بكسل، وتم تحديد نوع الخط إلى Roboto، وتم تحديد وزن الخط إلى bold، وتم تحديد أسلوب الخط إلى italic.

2- الخاصية textAlign

تستخدم الخاصية textAlign لتحديد محاذاة النص داخل الويدجت Text. يمكن استخدامها كالتالي:

Text(
  'Hello World!',
  textAlign: TextAlign.center,
)

في هذا المثال، تم تحديد محاذاة النص إلى الوسط.

“اقرأ أيضاً: شرح استخدام ويدجت ClipOval في فلاتر“

3- الخاصية maxLines

تستخدم الخاصية maxLines لتحديد عدد الأسطر التي يمكن أن يحتوي عليها النص. يمكن استخدامها بالتالي:

Text(
  'Hello World!',
  maxLines: 1,
)

في هذا المثال، يمكن أن يحتوي النص على سطر واحد فقط.

4- الخاصية overflow

تستخدم الخاصية overflow لتحديد ما يجب فعله إذا تجاوز النص الحد الأقصى للأسطر. يمكن استخدامها كالتالي:

Text(
  'Hello World!',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)

في هذا المثال، إذا تجاوز النص الحد الأقصى للأسطر، سيتم عرض علامة الاقتطاع “…” بدلاً من عرض النص الكامل.

5- الخاصية textScaleFactor

تستخدم الخاصية textScaleFactor لتحديد مقدار تغيير حجم النص بناءً على حجم الجهاز. يمكن استخدامها كالتالي:

Text(
  'Hello World!',
  textScaleFactor: 1.5,
)

في هذا المثال، سيتم تضخيم حجم النص بمقدار 1.5.

6- الخاصية softWrap

تستخدم الخاصية softWrap لتحديد ما إذا كان يجب عرض النص على عدة أسطر في حالة تجاوز الحد الأقصى للعرض. يمكن استخدامها كالتالي:

Text(
  'Hello World! This is a very long text that will not fit in one line if it is not wrapped.',
  softWrap: true,
)

في هذا المثال، سيتم عرض النص على عدة أسطر إذا لم يتمكن الحد الأقصى للعرض من استيعاب النص.

7- الخاصية textDirection

تستخدم الخاصية textDirection لتحديد اتجاه النص، مثل الاتجاه العربي من اليمين إلى اليسار. يمكن استخدامها كالتالي:

Text(
  'مرحبا بالعالم!',
  textDirection: TextDirection.rtl,
)

في هذا المثال، تم تحديد اتجاه النص إلى اليمين.

8- الخاصية locale

تستخدم الخاصية locale لتحديد اللغة التي يتم استخدامها لعرض النص. يمكن استخدامها كالتالي:

Text(
  'Hello World!',
  locale: Locale('ar', 'SA'),
)

في هذا المثال، تم تحديد اللغة العربية.

9- الخاصية strutStyle

تستخدم الخاصية strutStyle لتحديد خصائص الخط الأساسية للنص. يمكن استخدامها كالتالي:

Text(
  'Hello World!',
  style: TextStyle(fontSize: 20.0),
  strutStyle: StrutStyle(
    height: 1.5,
    leading: 0.5,
  ),
)

في هذا المثال، تم تحديد الارتفاع والتباعد بين الأسطر والخطوط الأساسية.

10- الخاصية textWidthBasis

تستخدم الخاصية textWidthBasis لتحديد الأساس الذي يتم احتسابه عند تحديد عرض النص، مثل الأساس الأصلي للحروف أو الأساس الفارغ. يمكن استخدامها كالتالي:

Text(
  'Hello World!',
  textWidthBasis: TextWidthBasis.longestLine,
)

في هذا المثال، تم تحديد الأساس الأصلي للحروف عند تحديد عرض النص.

11- الخاصية semanticsLabel

تستخدم الخاصية semanticsLabel لتحديد وصف للنص للمستخدمين الذين يعتمدون على قارئات الشاشة. يمكن استخدامها كالتالي:

Text(
  'Hello World!',
  semanticsLabel: 'Greeting',
)

في هذا المثال، تم تحديد وصف “Greeting” للنص.

“اقرأ أيضاً: شرح استخدام ويدجت RadioListTile في فلاتر“

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