عنصر (ويدجت ) النص في فلاتر Flutter text widget

مقدمة

في هذا الدرس، سنتعرف على كيفية استخدام عنصر النص (Text widget) في تطوير تطبيقات فلوتر. عنصر النص هو أحد العناصر الأساسية في فلوتر ويُستخدم لعرض النصوص بشكل مختلف وتخصيصات متعددة. سنقوم بإنشاء تطبيق بسيط يستخدم عنصر النص لعرض معلومات مختلفة، مثل العنوان والنصوص التوضيحية، ونتعرف على كيفية تخصيص مظهر النص بحجم الخط، اللون، الوزن، وغيرها من الخصائص. سيتيح لك هذا الدرس فهم أساسيات استخدام عنصر النص وتطبيقه في تطوير تطبيقات فلوتر.

العناصر أو الوجيدات الاساسية في فلاتر:وجدت النص

flutter Basic widgets

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

:flutter Basic widgets

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

يحتوي فلوتر على مجموعة من العناصر الأساسية أو “Basic Widgets” التي تستخدم لبناء وتصميم الواجهات بطريقة سهلة ومرنة. هذه العناصر تشمل:

 Text: تُستخدم لعرض نص على الشاشة بأشكال وأحجام مختلفة.

Container: يُستخدم لتحديد مساحة معينة على الشاشة وتخصيص مظهرها مثل اللون والحواف والتباعد.

Row و Column: تُستخدم لتنظيم العناصر بشكل أفقي (Row) أو عمودي (Column) على الشاشة بترتيب معين.

Image: يُستخدم لعرض الصور على الشاشة.

Icon: يُستخدم لعرض رموز الرموز على الشاشة.

Button: تُستخدم لإضافة أزرار التفاعل باللمس للتفاعل مع التطبيق.

TextField: تُستخدم لإدخال النصوص من المستخدم.

ListView و GridView: تُستخدم لعرض العناصر بشكل قائمة (ListView) أو شبكة (GridView).

هذه العناصر الأساسية تشكل جزءًا من الأدوات القوية التي يقدمها فلوتر للمطورين لبناء تطبيقات متقدمة وجذابة بطريقة سهلة وفعالة.

عنصر أو ودجيت النصر في فلاتر
:flutter Text widget

عنصر النص في فلوتر (Text widget) هو عنصر يُستخدم لعرض نص على واجهة المستخدم في تطبيقات فلوتر. يُستخدم هذا العنصر لعرض النصوص بأحجام وأنماط وألوان مختلفة، ويمكن تخصيصه بسهولة وفقًا لاحتياجات التطبيق.

بمجرد إنشاء عنصر نص، يمكنك تعيين النص الذي تريد عرضه باستخدام الخاصية “text”. يمكنك أيضًا تخصيص النص باستخدام العديد من الخصائص مثل اللون والحجم ونوع الخط وتوسيط النص والتنسيق والمزيد.

مثال بسيط يوضح كيفية استخدام عنصر النص في فلوتر:

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 Example'),
),
body: Center(
child: Text(
'مرحباً، هذا مثال على عنصر النص في فلوتر',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
textAlign: TextAlign.center,
),
),
),
);
}
}

شرح الكود:

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

استيراد المكتبات الضرورية من فلاتر:

import 'package:flutter/material.dart'; // استيراد المكتبات الضرورية من فلوتر

دالة الدخول الرئيسية لتشغيل التطبيق:

void main() { // دالة الدخول الرئيسية لتشغيل التطبيق

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

runApp(MyApp()); // تشغيل التطبيق باستخدام عنصر MyApp
}

تعريف فئة للتطبيق:

class MyApp extends StatelessWidget { // تعريف فئة التطبيق

بناء واجهة المستخدم للتطبيق:

@override
Widget build(BuildContext context) { // بناء واجهة المستخدم للتطبيق

ارجاع العنصر الجذري للتطبيق:

return MaterialApp( // إرجاع عنصر MaterialApp وهو العنصر الجذري للتطبيق

عرض الواجهة المديرة للتطبيق(كواجهة رئيسية):

home: Scaffold( // عرض واجهة مادر (Scaffold) كواجهة رئيسية للتطبيق

عرض شريط التطبيق في أعلى الصفحة:

appBar: AppBar( // عرض شريط التطبيق في أعلى الصفحة

عرض عنوان الصفحة:

title: Text('Text Widget Example'), // عرض عنوان الصفحة
),

توسيط محتوى الصفحة:

body: Center( // توسيط محتوى الصفحة

إضافة عنصر نص الى الواجهة:

child: Text( // إضافة عنصر نص إلى الواجهة
'مرحباً، هذا مثال على عنصر النص في فلوتر', // النص الذي سيتم عرضه

تخصيص مظهر النص وحجم الخط وسمك الخط ولون النص:

style: TextStyle( // تخصيص مظهر النص
fontSize: 24.0, // حجم الخط
fontWeight: FontWeight.bold, // سمك الخط (جريء)
color: Colors.blue, // لون النص
),

توسيط النص:

textAlign: TextAlign.center, // توسيط النص
),
),
),
);
}
}

هذا الكود يقوم بعرض نافذة تطبيق بسيطة تحتوي على عنصر نص متوسط ​​الحجم (باللغة العربية) مع خلفية زرقاء.

اشرح الكود في اسطر منفصلة:

بالطبع، إليك شرح الكود بشكل منفصل:

Import Statements (الاستيرادات):

import 'package:flutter/material.dart';

هذه الاستيرادات تستورد المكتبات اللازمة من فلوتر، بما في ذلك المكتبة المسؤولة عن واجهة المستخدم وعناصر التصميم.

Main Function (الدالة الرئيسية):

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

هذه الدالة الرئيسية تقوم بتشغيل التطبيق عن طريق استدعاء دالة runApp() وتمرير عنصر MyApp() كمدخل.

MyApp Class (فئة التطبيق):

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Text Widget Example'),
),
body: Center(
child: Text(
'مرحباً، هذا مثال على عنصر النص في فلوتر',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
textAlign: TextAlign.center,
),
),
),
);
}
}

هذه الفئة تمثل التطبيق بأكمله وترث من StatelessWidget. تحتوي على دالة build() التي تقوم بإنشاء وترتيب واجهة المستخدم للتطبيق.

MaterialApp Widget (عنصر MaterialApp):

return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Text Widget Example'),
),
body: Center(
child: Text(
'مرحباً، هذا مثال على عنصر النص في فلوتر',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
textAlign: TextAlign.center,
),
),
),
);

يُعرف MaterialApp كعنصر جذري للتطبيق، وهو المكان الذي يبدأ منه بناء واجهة المستخدم. يحتوي Scaffold على شريط التطبيق والجسم (body)، وهو المكان الذي يتم فيه عرض المحتوى.

AppBar Widget (عنصر AppBar):

appBar: AppBar(
title: Text('Text Widget Example'),
),

يُستخدم AppBar لعرض شريط التطبيق في الأعلى. تحتوي هذه الشريط على عنصر Text يعرض عنوان الصفحة.

Center Widget (عنصر Center):

body: Center(
child: Text(
'مرحباً، هذا مثال على عنصر النص في فلوتر',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
textAlign: TextAlign.center,
),
),

يُستخدم عنصر Center لوسط محتوى الصفحة. يحتوي على عنصر نص Text الذي يعرض النص المحدد.

Text Widget (عنصر Text):

child: Text(
'مرحباً، هذا مثال على عنصر النص في فلوتر',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
textAlign: TextAlign.center,
),

عنصر النص يعرض النص المحدد بأسلوب معين، بما في ذلك الحجم والسمك واللون وتوسيط النص.

خطوة بخطوة انشاء تطبيق على استخدامات text widget

سنقوم بإنشاء تطبيق بسيط يستخدم عنصر النص (Text widget) في فلوتر خطوة بخطوة.

نقم بإنشاء ملف جديد بإسم 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('Text Widget Usage Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'مرحبًا بك في تطبيق استخدامات عنصر النص!',
style: TextStyle(fontSize: 24.0),
),
SizedBox(height: 20.0),
Text(
'هذا مثال بسيط يوضح كيفية استخدام عنصر النص في فلوتر.',
textAlign: TextAlign.center,
),
],
),
),
),
);
}
}

الكود النهائي مجمع في ملف واحد :

هذا هو الكود النهائي لتطبيق

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 Usage Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'مرحبًا بك في تطبيق استخدامات عنصر النص!',
style: TextStyle(fontSize: 24.0),
),
SizedBox(height: 20.0),
Text(
'هذا مثال بسيط يوضح كيفية استخدام عنصر النص في فلوتر.',
textAlign: TextAlign.center,
),
],
),
),
),
);
}
}

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

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

قمنا  بنسخ هذا الكود إلى ملف main.dart وتشغيله على مفسر فلاتر اون لاين فكانت النتيجة :

شجرة التطبيق:

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

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

MaterialApp: هو العنصر الجذري للتطبيق، والذي يحتوي على Scaffold كجسم رئيسي للتطبيق.
Scaffold: يمثل هيكل الواجهة والذي يحتوي على AppBar و Body.
AppBar: شريط التطبيق العلوي، والذي يحتوي على عنصر النص.
Center: يقوم بتوسيط العناصر الفرعية داخله.
Column: يتيح ترتيب العناصر الفرعية بشكل عمودي.
Text: عنصر نص يرحب بالمستخدم.
Text: عنصر نص يشرح كيفية استخدام عنصر النص في فلوتر.
هذه هي بنية وترتيب العناصر في التطبيق البسيط الذي قمنا بإنشائه باستخدام عنصر النص في فلوتر.

مثال آخر على استخدامات text widget

سنقوم بانشاء تطبيق يستخدم عنصر النص (Text widget) في فلوتر، يتضمن تخصيصات متعددة لعنصر النص. في هذا المثال، سنقوم بإنشاء تطبيق بسيط يعرض معلومات عن الأفلام، مثل العنوان والتصنيف والتقييم. سنقوم بتخصيص عناصر النص ليعكس هذه المعلومات بشكل جميل. إليك الكود:

import 'package:flutter/material.dart';

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

class MovieApp 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: 28.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
SizedBox(height: 20.0),
MovieInfo(
title: 'John Wick',
genre: 'Action, Thriller',
rating: 8.2,
),
SizedBox(height: 10.0),
MovieInfo(
title: 'The Dark Knight',
genre: 'Action, Crime, Drama',
rating: 9.0,
),
],
),
),
),
);
}
}

class MovieInfo extends StatelessWidget {
final String title;
final String genre;
final double rating;

const MovieInfo({
required this.title,
required this.genre,
required this.rating,
});

@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'العنوان: $title',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 5.0),
Text(
'التصنيف: $genre',
style: TextStyle(
fontSize: 16.0,
fontStyle: FontStyle.italic,
),
),
SizedBox(height: 5.0),
Text(
'التقييم: $rating',
style: TextStyle(
fontSize: 16.0,
color: Colors.green,
),
),
],
),
);
}
}

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

شرح الكود بالتفصيل:

استيراد المكتبات اللازمة من فلوتر لبناء واجهة التطبيق.

import 'package:flutter/material.dart';

تعريف الدالة الرئيسية وتشغيل تطبيق فلوتر.

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

إنشاء فئة التطبيق الرئيسية التي تمتد من StatelessWidget لبناء واجهة التطبيق.

class MovieApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
}

إرجاع عنصر MaterialApp كواجهة رئيسية للتطبيق، يحتوي على Scaffold كجسم رئيسي للصفحة، وتحتوي AppBar على عنصر النص لعرض عنوان التطبيق.

**return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('أفلام'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
**

عنصر نص يعرض عنوانًا للصفحة بتخصيصات معينة مثل حجم الخط، الوزن، واللون.

Text(
'قائمة بأفلام الأكشن',
style: TextStyle(
fontSize: 28.0,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
)

إنشاء عنصر MovieInfo الخاص بعرض معلومات الفيلم مثل العنوان والتصنيف والتقييم.

MovieInfo(
title: 'John Wick',
genre: 'Action, Thriller',
rating: 8.2,
),

إعادة عنصر الـ Container لتحديد مظهر وتخصيصات خلية عرض المعلومات الخاصة بكل فيلم.

return Container(
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
)

عنصر نص يعرض عنوان الفيلم بتخصيصات معينة مثل حجم الخط والوزن.

Text(
'العنوان: $title',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),

عنصر نص يعرض تصنيف الفيلم بتخصيصات معينة مثل حجم الخط والخط المائل.

Text(
'التصنيف: $genre',
style: TextStyle(
fontSize: 16.0,
fontStyle: FontStyle.italic,
),
),

عنصر نص يعرض تقييم الفيلم بتخصيصات معينة مثل حجم الخط ولون النص.

Text(
'التقييم: $rating',
style: TextStyle(
fontSize: 16.0,
color: Colors.green,
),
),

تشغيل التطبيق: قمنا بسنخ الكود ثم لصقه في مفسر فلار اونلاين فكانت النتيجة:

شجرة الكود:

MovieApp
└── MaterialApp
    └── Scaffold
        ├── AppBar
        │   └── Text (أفلام)
        └── Center
            └── Column
                ├── Text (قائمة بأفلام الأكشن)
                ├── SizedBox
                ├── MovieInfo (John Wick)
                │   └── Container
                │       └── Column
                │           ├── Text (العنوان: John Wick)
                │           ├── Text (التصنيف: Action, Thriller)
                │           └── Text (التقييم: 8.2)
                ├── SizedBox
                └── MovieInfo (The Dark Knight)
                    └── Container
                        └── Column
                            ├── Text (العنوان: The Dark Knight)
                            ├── Text (التصنيف: Action, Crime, Drama)
                            └── Text (التقييم: 9.0)

هذه الشجرة توضح ترتيب وتسلسل العناصر في التطبيق، حيث يحتوي التطبيق على عناصر MaterialApp و Scaffold و AppBar و Center و Column و MovieInfo والعناصر النصية.

شرح شجرة الكود

MovieApp:
هو الكائن الرئيسي لتطبيقنا.

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

Scaffold:
يستخدم لإنشاء هيكل الواجهة للتطبيق ويحتوي على AppBar و Body.

AppBar:
يمثل شريط التطبيق في الأعلى ويحتوي على عنصر النص الذي يعرض عنوان التطبيق.

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

Column:
يستخدم لترتيب عناصره الفرعية بشكل عمودي.

Text Widgets (عناصر نصية):

يمثلون العناصر النصية في التطبيق.
يستخدمون لعرض النص بتخصيصات محددة مثل الحجم والوزن واللون وغيرها.
MovieInfo:
هو عنصر نصي خاص بعرض معلومات الفيلم مثل العنوان والتصنيف والتقييم.

يتكون من عناصر نصية متعددة مثل العنوان والتصنيف والتقييم مع تخصيصات مختلفة.

اختبار على عنصر النص في فلاتر

1-ما هو دور عنصر النص (Text widget) في فلوتر؟

أ: عرض الصور
ب: عرض النصوص
ج: تشغيل الفيديو
د: إرسال الرسائل

2-ما العنصر الذي يحتوي على AppBar و Body في تطبيق فلوتر؟

أ: Scaffold
ب: MaterialApp
ج: Center
د: Column

3-ما هو العنصر الذي يسمح بترتيب عناصره الفرعية بشكل عمودي في فلوتر؟

أ: Row
ب: Center
ج: Column
د: Container

4-ما الخاصية التي يمكن استخدامها لتحديد حجم الخط في عنصر النص؟

أ: fontColor
ب: textSize
ج: fontWeight
د: fontSize

5-ما هو الهدف من عنصر MovieInfo في المثال الشامل؟

أ: عرض الصور لأفلام مختلفة
ب: تشغيل العروض الترويجية للأفلام
ج: عرض معلومات حول الأفلام مثل العنوان والتصنيف والتقييم
د: عرض معلومات حول الموسيقى

الاجابات

ب: عرض النصوص
أ: Scaffold
ج: Column
د: fontSize
ج: عرض معلومات حول الأفلام مثل العنوان والتصنيف والتقييم