شرح StatelessWidget العناصر ثابت الحالة في فلاتر

“تصميم واجهات المستخدم باستخدام StatelessWidget في Flutter”

مقدمة StatelessWidget:

تُعتبر واجهات المستخدم (UI) جزءًا أساسيًا من تطوير التطبيقات في Flutter. تُعد واجهات المستخدم المميزة والسهلة الاستخدام مفتاحًا لتجربة المستخدم الناجحة.

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

Flutter هو إطار عمل لتطوير تطبيقات الجوال متعددة المنصات، ويسمح ببناء واجهات مستخدم جميلة ومتطورة بسرعة وسهولة. StatelessWidget هي واحدة من الفئات الأساسية في Flutter التي تُستخدم لبناء عناصر واجهات المستخدم. يعتمد StatelessWidget على المفهوم البسيط والفعال، حيث يتمثل هدفها في تقديم واجهة مستخدم ثابتة لا تتغير بناءً على حالتها الداخلية.

من خلال هذا الدرس، سنتعرف على مفهوم StatelessWidget وكيفية استخدامها لإنشاء واجهات مستخدم بسيطة وفعالة في Flutter.

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

مع فهم مفهوم StatelessWidget، سيكون بإمكاننا بناء واجهات مستخدم جميلة وسلسة في تطبيقاتنا باستخدام Flutter بطريقة بسيطة وفعالة.

العناصر الثابتة في فلاتر

StatelessWidget

StatelessWidget هو نوع من أنواع الويدجت في إطار عمل فلاتر دارت (Flutter).

يُستخدم StatefulWidget لبناء واجهات المستخدم في تطبيقات فلاتر دارت. يتميز StatelessWidget بأنه لا يحتوي على حالة قابلة للتغيير، مما يعني أنه لا يمكن تغيير مظهره بناءً على تغييرات في البيانات. عندما تكون واجهة المستخدم ثابتة ولا تحتاج إلى تحديثات متكررة بناءً على حالة البيانات، يُستخدم StatelessWidget لتقديم هذه الواجهة بشكل أسرع وأكثر فعالية، حيث يتم إنشاؤها مرة واحدة ولا تحتاج إلى إعادة بنائها مرة أخرى.

ما هي أهم العناصر أة الويدجات الثابتة في فلاتر ؟

توجد العديد من StatelessWidgets المدمجة في إطار عمل فلاتر دارت (Flutter) التي يمكن استخدامها في بناء واجهات المستخدم. هنا بعض الأمثلة على StatelessWidgets الشائعة:

Container: يُستخدم لتحديد وتخصيص مظهر عنصر واجهة المستخدم بما في ذلك اللون والحدود والتباعد والزوايا والخلفية والتحكم في الطفو والمزيد.

Text: يُستخدم لعرض نص ثابت على الشاشة.

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

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

Row: يُستخدم لترتيب العناصر الفردية أفقيًا.

Column: يُستخدم لترتيب العناصر الفردية رأسيًا.

ListView: يُستخدم لعرض قائمة من العناصر.

GridView: يُستخدم لعرض عناصر في شبكة من الصفوف والأعمدة.

Stack: يُستخدم لترتيب العناصر بشكل مكدس.

Scaffold: يُستخدم لتخطيط واجهة المستخدم الأساسية للتطبيق، ويحتوي على هيكل الصفحة الأساسي مثل AppBar وBody وFloatingActionButton وغيرها.

هذه بعض الأمثلة الشائعة ل StatelessWidgets ، وهناك المزيد من الأدوات والعناصر التي يمكن استخدامها لبناء واجهات المستخدم باستخدام فلاتر دارت.

تطبيق 1: عناصر واجهى المستخدم الثابتة في فلاتر

خطوة بخطوة سننشء تطبيقا يتناول StatelessWidget

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

إليك خطوات العمل:

الخطوة 1: إعداد مشروع فلاتر دارت جديد
يمكنك استخدام أدوات التطوير مثل Android Studio أو Visual Studio Code لإنشاء مشروع فلاتر دارت جديد.

الخطوة 2: إنشاء StatelessWidget
في ملف main.dart، قم بإنشاء StatelessWidget جديدة تُسمى MyApp. هذه الواجهة ستكون مسؤولة عن عرض النص على الشاشة.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Stateless Widget App',
home: Scaffold(
appBar: AppBar(
title: Text('Stateless Widget Example'),
),
body: Center(
child: Text(
'Hello, World!',
style: TextStyle(fontSize: 24.0),
),
),
),
);
}
}

الخطوة 3: تشغيل التطبيق
قم بتشغيل التطبيق على محاكي أو جهاز حقيقي لعرض النص “Hello, World!” على الشاشة.

الخطوة 4: فهم الكود
MyApp: يُمثل واجهة التطبيق الرئيسية، والتي تعرض Scaffold.
Scaffold: يقوم بتوفير تخطيط أساسي للتطبيق، والذي يحتوي على AppBar و Body.
AppBar: يعرض العنوان في الجزء العلوي من التطبيق.
Text: تستخدم لعرض النص على الشاشة، ويمكن تخصيص خصائصها مثل الحجم والنمط.

الخطوة 5: التعديل والتجربة

يمكنك تغيير النص في Text widget أو تعديل أي جزء آخر من التطبيق وتجربة التغييرات.

هذا هو تطبيق بسيط يستخدم StatelessWidget لعرض نص على الشاشة. يمكنك بناء على هذا التطبيق لإضافة مزيد من العناصر وتعلم المزيد عن فلاتر دارت وكيفية استخدامها لتطوير تطبيقات المحمول.

تم تعديل الكود وتوسيعه ليتضمن بعض التعليقات وتحسينات طفيفة. إليك الكود المحدث:

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('StatelessWidget Example'),
),
body: Center(
child: MyStatelessWidget(),
),
),
);
}
}

// Stateless widget to display a simple text
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20.0),
color: Colors.blue,
child: Text(
'Hello, World!',
style: TextStyle(
fontSize: 24.0,
color: Colors.white,
),
),
);
}
}

في هذا التعديل، تمت إضافة تعليقات لشرح الكود وتحديد الأجزاء المختلفة من التطبيق.

استخدمت تعليقات لتوضيح كل فئة ودورها في التطبيق.

هذا الكود سيقوم ببناء تطبيق بسيط في Flutter يستخدم StatelessWidget لعرض نص ثابت “Hello, World!” في واجهة المستخدم.

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

import 'package:flutter/material.dart';

 دالة رئيسية لبدء التطبيق

void main() {

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

runApp(MyApp());
}

تطبيق رئيسي يستخدم StatelessWidget

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

 ارجاع مكونات التطبيق

return MaterialApp(

 الصفحة الرئيسية للتطبيق

home: Scaffold(

 شريط التطبيق العلوي

appBar: AppBar(

 عنوان شريط التطبيق

title: Text('StatelessWidget Example'),
),

الجسم الرئيسي للتطبيق

body: Center(

 عنصر واجهة المستخدم الخاص بنا

child: MyStatelessWidget(),
),
),
);
}
}

 StatelessWidget يقوم بعرض نص بسيط

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

 عنصر واجهة المستخدم لعرض نص

return Container(

تعيين التباعد الداخلي للعنصر

padding: EdgeInsets.all(20.0),

تعيين لون خلفية العنصر

color: Colors.blue,

عنصر واجهة المستخدم لعرض النص

child: Text(

النص الذي يتم عرضه وخصائصه

'Hello, World!', // النص الذي يتم عرضه
style: TextStyle(
fontSize: 24.0, // حجم الخط
color: Colors.white, // لون الخط
),
),
);
}
}

هذه الشرحات البسيطة توضح كيفية عمل التطبيق ودور كل سطر من الشفرة في إنشاء وتشغيل التطبيق.

تطبيق  2 على استخدام StatelessWidget مع الشرح خطوة بخطوة

 ها هو تطبيق بسيط يستخدم StatelessWidget لعرض صورة:

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('StatelessWidget Example'),
),
body: Center(
child: MyStatelessWidget(),
),
),
);
}
}

class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20.0),
color: Colors.blue,
child: Image.asset('assets/image.png'), // تحميل الصورة من المسار المحدد
);
}
}

شرح خطوات الشفرة:

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

تعريف دالة ()main  التي تقوم ببدء التطبيق باستدعا() runApp  وتمرير ()MyApp  كمعامل.

تعريف فئة MyApp التي تمثل التطبيق نفسه. تستخدم StatelessWidget.

داخل MyApp، يتم بناء MaterialApp الذي يحتوي على Scaffold كواجهة للتطبيق، مع AppBar كشريط علوي و MyStatelessWidget كمحتوى للجسم.

تعريف فئة MyStatelessWidget التي تستخدم StatelessWidget لعرض صورة.

داخل MyStatelessWidget، يتم استخدام Container لتحديد الحواف واللون، ثم تُضاف صورة باستخدام ()Image.asset مع تحديد مسار الصورة الموجودة في ملف الأصول (assets/image.png).

تأكد من وضعك للصور في مسارها الصحيح حتى تظهر دون مشاكل

هذا التطبيق سيقوم بعرض صورة محددة في واجهة المستخدم باستخدام StatelessWidget.

التفرع الهرمي للويجت (Widget Hierarchy) في التطبيق يبدو كالتالي:

MaterialApp
Scaffold
AppBar
Center
MyStatelessWidget
Container
Image

يبدأ التطبيق بـ MaterialApp كعنصر رئيسي. ثم، يتم تحديد Scaffold كواجهة للتطبيق، مع AppBar و Center كعناصر فرعية. داخل Center، يتم عرض MyStatelessWidget الذي يحتوي على Container. وأخيرًا، يتم عرض الصورة داخل الـ Container.

تطبيق 3 على استخدام StatelessWidget

هذا هو تطبيق بسيط يستخدم StatelessWidget لعرض نص وصورة:

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('StatelessWidget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MyTextWidget(),
SizedBox(height: 20),
MyImageWidget(),
],
),
),
),
);
}
}

class MyTextWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text(
'Hello, World!',
style: TextStyle(fontSize: 24),
);
}
}

class MyImageWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Image.asset(
'assets/image.png',
width: 200,
);
}
}

في هذا التطبيق:

MyApp هو StatelessWidget الرئيسي الذي يحتوي على MaterialApp و Scaffold ويحدد AppBar و Body.
في الـ Body، تم وضع عنصر واجهة مستخدم Center لوضع العناصر بالمنتصف.
داخل Center، تم وضع Column لترتيب العناصر رأسيًا.
داخل Column، تم وضع MyTextWidget لعرض النص “Hello, World!”.
وبعدها، تم وضع فاصل عمودي باستخدام SizedBox.
أخيرًا، تم وضع MyImageWidget لعرض الصورة الموجودة في ملف الأصول.

شجرة الويدجت (Widget tree) لهذا التطبيق تكون كالتالي:

MaterialApp
Scaffold
AppBar
Center
Column
MyTextWidget
SizedBox
MyImageWidget
هذا يعني أن الويدجتات مرتبة بشكل هرمي، حيث يكون MaterialApp هو الجذر، وتحتوي Scaffold على AppBar و Center، وفي داخل Center يوجد Column، وفي داخل Column يتم ترتيب MyTextWidget و SizedBox و MyImageWidget.

تطبيق 4 على استخدام StatelessWidget

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

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

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
final List<Person> people = [
Person('John', 25, 'assets/john.jpg'),
Person('Alice', 30, 'assets/alice.jpg'),
Person('Bob', 28, 'assets/bob.jpg'),
];

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('People List'),
),
body: ListView.builder(
itemCount: people.length,
itemBuilder: (context, index) {
return PersonListItem(people[index]);
},
),
),
);
}
}

class Person {
final String name;
final int age;
final String imageUrl;

Person(this.name, this.age, this.imageUrl);
}

class PersonListItem extends StatelessWidget {
final Person person;

PersonListItem(this.person);

@override
Widget build(BuildContext context) {
return ListTile(
leading: CircleAvatar(
backgroundImage: AssetImage(person.imageUrl),
),
title: Text(person.name),
subtitle: Text('Age: ${person.age}'),
onTap: () {
// إضافة التفاصيل أو أي عمليات أخرى هنا
print('${person.name} tapped!');
},
);
}
}

في هذا التطبيق:

تم إنشاء فئة Person لتمثيل بيانات الشخص.
تم إنشاء فئة MyApp التي تحتوي على قائمة من الأشخاص.
تم استخدام ListView.builder لعرض القائمة، حيث يتم بناء كل عنصر من القائمة باستخدام فئة PersonListItem.
فئة PersonListItem تقوم بعرض بيانات الشخص (الاسم، العمر، والصورة) في عنصر القائمة.

شجرة الويدجت (Widget tree) لهذا التطبيق ستكون كالتالي:

MaterialApp
Scaffold
AppBar
NamesList
حيث تكون MaterialApp هي الواجهة الرئيسية للتطبيق، وتحتوي على Scaffold كواجهة رئيسية تحتوي على AppBar وعلى الويدجت NamesList الذي يحتوي على ListView لعرض القائمة من الأسماء.

تطبيق 5 على استخدام StatelessWidget

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

دعونا نقوم بتحليل الكود سطرًا بسطر:

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

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Advanced List Example',
home: HomePage(),
);
}
}

class HomePage extends StatelessWidget {
final List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('List Example'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailPage(item: items[index]),
),
);
},
);
},
),
);
}
}

class DetailPage extends StatelessWidget {
final String item;

DetailPage({required this.item});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Detail Page'),
),
body: Center(
child: Text(item),
),
);
}
}

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

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

شجرة الويدجت لهذا التطبيق

شجرة الويدجت لهذا التطبيق ستكون كالتالي:

MaterialApp
HomePage
Scaffold
AppBar
ListView.builder
ListTile (Item 1)
ListTile (Item 2)
ListTile (Item 3)
ListTile (Item 4)
ListTile (Item 5)
DetailPage
Scaffold
AppBar
Center
Text

انشاء كويز على StatelessWidget

طيب، هذا هو تطبيق الكويز البسيط باستخدام StatelessWidget:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Quiz App',
home: QuizPage(),
);
}
}

class QuizPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Quiz'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
QuizQuestion(questionText: 'What is the capital of France?'),
QuizAnswer(answerText: 'Paris'),
QuizAnswer(answerText: 'London'),
QuizAnswer(answerText: 'Berlin'),
QuizAnswer(answerText: 'Rome'),
],
),
),
);
}
}

class QuizQuestion extends StatelessWidget {
final String questionText;

QuizQuestion({required this.questionText});

@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(10.0),
child: Text(
questionText,
style: TextStyle(fontSize: 20.0),
),
);
}
}

class QuizAnswer extends StatelessWidget {
final String answerText;

QuizAnswer({required this.answerText});

@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 20.0),
child: ElevatedButton(
onPressed: () {
// Handle button press
},
child: Text(answerText),
),
);
}
}

هذا التطبيق يعرض سؤالًا وخيارات إجابة، حيث يمكن للمستخدم النقر على الخيارات للإجابة عن السؤال.

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