Text Widget

📝 ما هي Text Widget في Flutter؟

ويدجت Text تُستخدم لعرض نص على الشاشة.

Text('مرحباً بك في Flutter')
Dart
✅ الشكل الأساسي:
Text(
  'مرحباً',
)
Dart

تُعرض كلمة “مرحباً” في النص الافتراضي (لون أسود، حجم صغير، بدون تنسيق).

📌 الخصائص المهمة التي تُستخدم مع Text:
1. style

تُستخدم لتنسيق الخط (اللون، الحجم، الوزن، نوع الخط…).

Text(
  'مرحبا بك',
  style: TextStyle(
    color: Colors.blue,
    fontSize: 24,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    letterSpacing: 2,
    wordSpacing: 10,
  ),
)
Dart
شرح الخيارات داخل TextStyle:
الخاصيةالشرح
colorلون الخط
fontSizeحجم الخط
fontWeightوزن الخط (سميك، خفيف..) مثل: FontWeight.bold
fontStyleمائل أو عادي: FontStyle.italic
letterSpacingالمسافة بين الحروف
wordSpacingالمسافة بين الكلمات
fontFamilyاسم الخط
2. textAlign

محاذاة النص داخل المساحة المتوفرة له:

Text(
  'هذا نص طويل جداً جداً',
  textAlign: TextAlign.center,
)
Dart
القيمةالمحاذاة
TextAlign.leftلليسار
TextAlign.rightلليمين
TextAlign.centerفي المنتصف
TextAlign.justifyضبط النص (كما في الصحف)
3. maxLines

تحدد عدد السطور المسموح بها للنص:

Text(
  'هذا نص طويل جداً جداً وسيتم قطعه إذا تجاوز السطر المحدد',
  maxLines: 1,
)
Dart
4. overflow

تُستخدم لتحديد ماذا يحدث لو تجاوز النص عدد السطور:

Text(
  'نص طويل جداً',
  maxLines: 1,
  overflow: TextOverflow.ellipsis, // ...
)
Dart
القيمةالتأثير
TextOverflow.clipيقطع النص بدون أي رمز
TextOverflow.fadeيخفيه تدريجياً
TextOverflow.ellipsisيضيف (…)
5. textDirection

تحدد اتجاه الكتابة:

Text(
  'مرحبا',
  textDirection: TextDirection.rtl,
)
Dart
القيمةالشرح
TextDirection.ltrمن اليسار لليمين
TextDirection.rtlمن اليمين لليسار
6. softWrap

هل يتم التفاف النص تلقائياً إذا تجاوز العرض؟

Text(
  'نص طويل جداً قد لا يظهر كله في الشاشة',
  softWrap: true,
)
Dart

7. textScaleFactor

لتكبير أو تصغير حجم الخط كنسبة من الحجم الأصلي:

Text(
  'مرحبا',
  textScaleFactor: 1.5, // تكبير بمقدار 1.5 مرة
)
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('مثال على Text Widget')),
        body: Center(
          child: Text(
            'أهلاً بك في Flutter',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
              color: Colors.deepPurple,
              fontStyle: FontStyle.italic,
              letterSpacing: 2,
            ),
            textAlign: TextAlign.center,
            textDirection: TextDirection.rtl,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    );
  }
}
Dart

style: TextStyle(
  color: Colors.blue,
),
Dart

الـ TextStyle تسمى كائن (Object) من الكلاس TextStyle.

التفسير الكامل:
  • TextStyle هو كلاس (Class) في Flutter.
  • عندما تكتبه بهذه الطريقة TextStyle(...)، فأنت تقوم بإنشاء كائن (Instance) جديد من هذا الكلاس.
  • هذا الكائن يتم تمريره إلى خاصية style في ويدجت Text.
المصطلحات الدقيقة:
  • TextStyle → اسم الكلاس
  • TextStyle(...) → إنشاء كائن (Object Instantiation) من الكلاس
  • style: TextStyle(...) → تمرير كائن من النوع TextStyle إلى الخاصية style
مثال كامل:
Text(
  'مرحبا بك',
  style: TextStyle(
    color: Colors.blue,       // لون النص
    fontSize: 24,             // حجم الخط
    fontWeight: FontWeight.bold, // وزن الخط (سماكة)
    fontStyle: FontStyle.italic, // نمط الخط (مائل)
    letterSpacing: 2.0,       // تباعد الحروف
    wordSpacing: 5.0,         // تباعد الكلمات
    decoration: TextDecoration.underline, // خط تحت النص
    decorationColor: Colors.red,          // لون الزخرفة (كالخط تحت النص)
    decorationStyle: TextDecorationStyle.dashed, // نمط الزخرفة
  ),
)
Dart