سلسلة عناصر ( ودجات ) فلاتر - الأساسيات

مقدمة : 

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

كيف يتم تضمينه :

 يمكن تضمينه داخل أي مكان في الواجهة فهو عنصر Widget , وله عدة خصائص ( النص وخصائص إختيارية لها قيم افتراضية ) 

Center(
        child: Text(
      "سلسلة عناصر فلاتر",
      textAlign: TextAlign.right,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.bold,
          backgroundColor: Colors.blue,
          decoration: TextDecoration.underline),
    ))

شرح الخصائص : 

textAlign : محاذاة النص , تأخذ قيمة TextAlign وهو من نوع enum (كمثال : TextAlign.center  ) وله قيم متعددة يمكنك الإطلاع عليها من هنا

overflow : ومعناه ( معالجة الفائض-الزائد من النص عن قياس العنصر الأب ) و تأخذ قيمة TextOverflow وهو من نوع enum (كمثال : TextOverflow.ellipsis ) وله قيم متعددة (clip: قطع ) (fade : اختفاء تدريجي للزيادة ) (ellipsis : نقاط ) (visible : ظاهر ) يمكنك الإطلاع عليها من هنا . 

style : تصميم النص ويستعمل كلاس TextStyle حيث يمكن من خلاله التحكم بشكل النص ولونه ونوع الخط والعديد من خصائصه .

textDirection : اتجاه النص , تأخذ قيمة TextDirection وهو من نوع enum وله خيارين فقط (TextDirection.ltr ويعني من اليسار لليمين و TextDirection.rtl ويعني من اليمين لليسار ) 

maxLines : عدد السطور الأعظمي ويأخذ قيمة عدد طبيعي int .

خصائص تصميم النص TextStyle : 

يمكنك التحكم بكل ما يتعلق بالنص عبر خصائص متعددة سنتناول أبرزها : 

color : تأخذ قيمة Color وهو لون النص .

backgroundColor : تأخذ قيمة Color وهو لون خلفية النص .

fontSize : تأخذ قيمة double وهو قياس النص .

decoration : تأخذ قيمة كلاس TextDecoration من نوع enum كمثال (TextDecoration.underline) و يمكن من خلالها إضافة خط تحت النص أو في وسطه أو لكل سطر يمكنك الإطلاع على خصائصه من هنا .

fontFamily : اسم الخط وتأخذ قيمة String , يتم تعيين اسماء الخطوط داخل ملف pubspec.yaml .

fontWeight : وزن الخط ( سميك أو خفيف أو طبيعي )  كمثال (FontWeight.bold) ويأخذ قيمة كلاس FontWeight ويمكنك التحكم بوزنه عبر كثير من الخيارات .

letterSpacing : التباعد بين الاحرف ويأخذ قيمة double .

wordSpacing : التباعد بين الكلمات ويأخذ قيمة double .

لكن ماذا لو أدرت استعمال ستايل لكل كلمة او مقطع في النص ؟ هنا يأتي استعمال عنصر RichText : 

يستعمل هذا العنصر لدمج عدة نصوص متعددة الاشكال ( الستايلات ) في عنصر واحد بدون الحاجة لاستعمال عناصر حاوية أخرى , سيكون هو الاب والنصوص متعددة الستايلات هم أبناؤه .

كيف يتم تضمينه :

Center(
        child: RichText(
      text: TextSpan(
        text: 'سلسلة ',
        style: DefaultTextStyle.of(context).style,
        children: const [
          TextSpan(text: 'عناصر', style: TextStyle(fontWeight: FontWeight.bold)),
          TextSpan(text: ' فلاتر !'),
        ],
      ),
    ))

المراجع : 

Text widgets | Flutter
TextStyle class - painting library - Dart API (flutter.dev)