عنصر واجهة المستخدم “ستاك” في فلاتر Flutter Stack widget

Stack في Flutter: التعرف والاستخدام 

عنصر واجهة المستخدم “ستاك” في فلاتر

مقدمة:
في هذا الدرس، سنتعرف على عنصر واجهة المستخدم “Stack” في إطار العمل Flutter. يعد عنصر “Stack” أحد العناصر القوية في تطوير تطبيقات Flutter، حيث يسمح لك بترتيب العناصر بشكل مكدس أو متداخل داخل واجهة المستخدم. سنقوم بفهم كيفية استخدام “Stack” لتحقيق ترتيب مرن وإنشاء تخطيطات متقدمة. كما سنناقش الخصائص الأساسية لـ “Stack” وكيفية استخدامها بشكل صحيح لتحقيق التصميم المطلوب لتطبيقات Flutter الخاصة بك.

Stack widget

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

• خطوة بخطوة كيف نستخدم Stack widget؟

 سنقدم نظرة عامة على كيفية استخدام عنصر واجهة المستخدم “Stack” في تطوير تطبيقات الهواتف المحمولة باستخدام إطار عمل Flutter.

استيراد الحزمة:
في ملف الكود الخاص بتطبيقك (عادةً main.dart)، تأكد من استيراد حزمة Flutter، حيث يتم توفير “Stack” كجزء منها. الاستيراد يكون عادة في الجزء العلوي من الملف.

import 'package:flutter/material.dart';

استخدام “Stack” في واجهة المستخدم:
يمكننا استخدام “Stack” كعنصر في واجهة المستخدم الخاصة بنا.

على سبيل المثال، يمكننا استخدامه في داخل واجهة Scaffold الرئيسية.

Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Stack(
children: [
// اضف هنا العناصر الفرعية التي ترغب في ترتيبها
],
),
)

إضافة العناصر الفرعية:
بمجرد وضع “Stack” في واجهة المستخدم، يمكننا البدء  بإضافة العناصر الفرعية داخله باستخدام خاصية children.

ويمكننا تحديد مواقع هذه العناصر بواسطة خصائص مثل Positioned.

Stack(
children: [
Positioned(
top: 50,
left: 20,
child: Text('Hello'),
),
Positioned(
bottom: 20,
right: 20,
child: Text('World'),
),
],
)

تخصيص التخطيط:

يمكنك استخدام خصائص “Stack” مثل alignment لتحديد توزيع العناصر داخله. يمكنك أيضًا استخدام الخصائص الأخرى مثل fit و overflow لضبط سلوك “Stack” حسب احتياجاتك.

Stack(
alignment: Alignment.center,
fit: StackFit.expand,
overflow: Overflow.visible,
children: [
// اضف العناصر هنا
],
)

تشغيل التطبيق:
بعد إضافة “Stack” وتخصيصها وإضافة العناصر الفرعية، قم بتشغيل التطبيق على محاكي أو جهاز حقيقي لرؤية النتيجة والتحقق من التخطيط والمظهر.

هذه الخطوات البسيطة توضح كيفية استخدام عنصر واجهة المستخدم “Stack” في تطوير تطبيقات Flutter. يمكنك استكمال التعديلات وإضافة المزيد من العناصر وتخصيص التخطيط حسب احتياجات تطبيقك.

هذا هو مثال بسيط لاستخدام عنصر واجهة المستخدم “Stack” في تطبيق Flutter:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stack Widget Example',
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget Example'),
),
body: Stack(
alignment: Alignment.center,
children: [
Container(
color: Colors.blue,
),
Positioned(
top: 50,
left: 20,
child: Text(
'Hello',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
Positioned(
bottom: 50,
right: 20,
child: Text(
'World',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
),
],
),
),
);
}
}

هذا التطبيق يعرض خلفية زرقاء مع نصين “Hello” و “World” في مواقع محددة بشكل مطلق (مع تعيين الزوايا بالنسبة للـ “Stack”). يمكنك تغيير الألوان والخطوط والمواقع كما تشاء لتناسب احتياجات تطبيقك. قم بنسخ ولصق الكود في ملف main.dart في مشروع Flutter جديد، وسيعمل التطبيق كما هو موضح في المثال.

شرح الكود :

import ‘package:flutter/material.dart’;: هذا السطر يقوم بتحميل مكتبة Flutter التي تحتوي على عناصر واجهة المستخدم والأدوات اللازمة لبناء التطبيقات.

void main() {: هذا السطر يبدأ تنفيذ التطبيق. في هذا المثال، نحن نقوم بتشغيل MyApp() كواجهة للتطبيق.

runApp(MyApp());: يتم استدعاء runApp() لتشغيل التطبيق، ويتم تمرير MyApp() كواجهة رئيسية للتطبيق.

class MyApp extends StatelessWidget {: نحن نقوم بتعريف فئة MyApp التي تمتد من StatelessWidget. هذه الفئة تمثل التطبيق نفسه.

MaterialApp(): هذا السطر يقوم بتحديد مظهر وسلوك التطبيق. في هذا المثال، نحن نستخدم MaterialApp التي تعرف التطبيق كتطبيق بتصميم المواد.

Scaffold(): هذا السطر يقوم ببناء بنية التطبيق الأساسية، بما في ذلك شريط التطبيق وجسم التطبيق.

appBar: AppBar(: هذا السطر يحدد شريط التطبيق العلوي، حيث نستخدم AppBar() لإنشاء شريط التطبيق.

body: Stack(): في هذا السطر، نحدد الجسم الرئيسي للتطبيق باستخدام عنصر واجهة المستخدم Stack()، الذي يتيح لنا ترتيب العناصر بطريقة مكدسة.

children: []: هنا نبدأ بتعريف العناصر الفرعية لـ Stack() باستخدام القوسين المربعين. يمكننا وضع عدة عناصر فرعية داخل هذه القائمة.

Container(): هذا السطر يعرف عنصرًا من نوع Container، والذي يمثل مربعًا يمكننا تخصيصه بمظهر وخصائص محددة. في هذا المثال، نستخدمه كخلفية زرقاء.

Positioned(): هذا السطر يعرف عنصرًا من نوع Positioned، الذي يسمح لنا بتحديد موضع محدد للعنصر داخل Stack. في هذا المثال، نستخدمه لوضع نص “Hello” في الجزء العلوي الأيسر من الشاشة.

Text(‘Hello’, style: TextStyle(…)),: هذا السطر يقوم بعرض النص “Hello” في الموقع المحدد، مع تحديد النمط الخاص به، مثل الحجم واللون.

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

تطبيق  على كيفية استخدام Stack widget

دعونا نقوم ببناء تطبيق بسيط يستخدم Stack widget في Flutter.

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

هذا التطبيق سيعرض كيفية استخدام الـ Stack لترتيب العناصر في واجهة المستخدم.

هاكم الكود الكامل:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stack Widget Example',
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget Example'),
),
body: Stack(
fit: StackFit.expand,
children: [
// الصورة كخلفية
Image.network(
'https://via.placeholder.com/500x500', // رابط الصورة
fit: BoxFit.cover,
),
// النص في المنتصف
Center(
child: Text(
'Hello, Stack!',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
),
),
);
}
}

هذا التطبيق يستخدم Stack لترتيب صورة كخلفية ونص في المنتصف.

دعونا نفسر الكود:

يتم استيراد المكتبات اللازمة وتعريف main() الذي يبدأ تنفيذ التطبيق.

تعريف فئة MyApp التي تمتد من StatelessWidget، والتي تقوم بإرجاع MaterialApp التي تعرف التطبيق وتحدد الشاشة الرئيسية للتطبيق.

تعريف Scaffold كواجهة للتطبيق، حيث يتم تحديد AppBar و body فيه.

تحديد body كـ Stack، حيث يتم وضع العناصر داخله. StackFit.expand يضمن تمدد الـ Stack ليملأ المساحة المتاحة.

العناصر داخل Stack تشمل:

Image.network() لعرض الصورة كخلفية. في هذا المثال، نستخدم صورة عبر الإنترنت.
Center يحتوي على Text الذي يعرض النص “Hello, Stack!” في المنتصف.
قم بتشغيل التطبيق على جهاز الهاتف أو المحاكي لرؤية النتيجة، يجب عليك رؤية صورة كخلفية مع النص في المنتصف.

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

تطبيق 3 :  عن Stack widget

سنقوم بإنشاء تطبيق  يستخدم Stack widget في Flutter.

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

هذا التطبيق سيظهر كيفية استخدام الـ Stack لترتيب العناصر في واجهة المستخدم.

هاكم الكود الكامل:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stack Widget Example',
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget Example'),
),
body: Stack(
alignment: Alignment.center,
children: [
// الخلفية - الصورة
Container(
color: Colors.blue,
),
// النص
Positioned(
top: 50,
child: Text(
'Hello, Stack!',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
// الدائرة
Positioned(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
),
),
],
),
),
);
}
}

هذا التطبيق يستخدم Stack لترتيب النص والدائرة. دعونا نفسر الكود:

يتم استيراد المكتبات اللازمة وتعريف main() الذي يبدأ تنفيذ التطبيق.

تعريف فئة MyApp التي تمتد من StatelessWidget، والتي تقوم بإرجاع MaterialApp التي تعرف التطبيق وتحدد الشاشة الرئيسية للتطبيق.

تعريف Scaffold كواجهة للتطبيق، حيث يتم تحديد AppBar و body فيه.

تحديد body كـ Stack، حيث يتم وضع العناصر داخله. alignment: Alignment.center يضمن وضع العناصر في المنتصف.

العناصر داخل Stack تشمل:

Container بلون أزرق كخلفية.
Positioned يحتوي على Text الذي يعرض النص “Hello, Stack!” في الأعلى.
Positioned آخر يحتوي على Container بشكل دائري بلون أحمر.
قم بتشغيل التطبيق على جهاز الهاتف أو المحاكي لرؤية النتيجة. سترى خلفية بلون أزرق مع نص في الأعلى ودائرة حمراء في المنتصف. هذا يظهر كيف يمكن استخدام Stack لترتيب العناصر بحرية في واجهة المستخدم.

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

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

- MaterialApp
  - Scaffold
    - AppBar
    - Stack
      - Container (خلفية الشاشة)
      - Positioned
        - Text (النص في الأعلى)
      - Positioned
        - Container (الدائرة في المنتصف)

هذه الشجرة توضح الترتيب الهرمي لعناصر واجهة المستخدم في التطبيق. تبدأ مع MaterialApp كواجهة رئيسية للتطبيق، ثم Scaffold كواجهة الشاشة، وداخلها نجد العناصر الفرعية مثل AppBar و Stack. داخل Stack، يتم ترتيب العناصر الأخرى بما في ذلك Container لخلفية الشاشة، و Positioned مع Text لعرض النص في الأعلى، وآخر Positioned يحتوي على Container لعرض الدائرة في المنتصف.

تطبيق 4 عن Stack widget

لنقم بإنشاء تطبيق آخر يستخدم عنصر واجهة المستخدم “Stack” في Flutter.

سنقوم ببناء تطبيق يعرض صورة كخلفية ونصًا يظهر فوق الصورة. هذا التطبيق سيظهر كيفية استخدام الـ “Stack” لترتيب العناصر في واجهة المستخدم.

هاكم الكود الكامل:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stack Widget Example',
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget Example'),
),
body: Stack(
fit: StackFit.expand,
children: [
// الصورة كخلفية
Image.asset(
'assets/background_image.jpg', // مسار الصورة المحلية
fit: BoxFit.cover,
),
// النص في المنتصف
Center(
child: Text(
'Hello, Stack!',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
),
),
);
}
}

الشرح:

نبدأ بتحميل الحزم اللازمة وتعريف الدالة الرئيسية main() التي تشغل التطبيق.

يتم تعريف فئة MyApp التي تمتد من StatelessWidget، والتي تعرف واجهة التطبيق.

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

في body من Scaffold، نستخدم Stack لترتيب العناصر. fit: StackFit.expand يضمن تمدد Stack لملء المساحة المتاحة.

العناصر داخل Stack هي:

Image.asset() لعرض الصورة كخلفية، حيث نستخدم الصورة المحلية هذه المرة.
Center يحتوي على Text الذي يعرض النص “Hello, Stack!” في المنتصف.
قم بتشغيل التطبيق على جهاز الهاتف أو المحاكي لرؤية النتيجة. سترى صورة كخلفية مع نص “Hello, Stack!” موجود فوق الصورة.

تطبيق 5 سيتخدم صور من الانترنت عن Stack widget

 دعونا نقوم بإنشاء تطبيق يستخدم Stack widget في Flutter لعرض صور من الإنترنت.

سنقوم ببناء تطبيق يعرض صورة كخلفية وصورة أخرى تظهر فوق الصورة الخلفية باستخدام Stack.

هاكم الكود الكامل:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stack Widget Example',
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget Example'),
),
body: Stack(
fit: StackFit.expand,
children: [
// الصورة الخلفية من الإنترنت
Image.network(
'https://via.placeholder.com/500x500', // رابط الصورة
fit: BoxFit.cover,
),
// الصورة التي تظهر فوق الخلفية
Center(
child: Image.network(
'https://via.placeholder.com/200x200', // رابط الصورة
width: 200,
height: 200,
),
),
],
),
),
);
}
}

الشرح:

نقوم بتحميل الحزم اللازمة وتعريف الدالة الرئيسية main() التي تشغل التطبيق.

نقوم بتعريف فئة MyApp التي تمتد من StatelessWidget، والتي تقوم بإرجاع واجهة التطبيق.

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

في body من Scaffold، نستخدم Stack لترتيب العناصر. fit: StackFit.expand يضمن تمدد Stack لملء المساحة المتاحة.

العناصر داخل Stack هي:

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

أختبار مع  الاجابات عن Stack widget

سؤال1: ما هو دور عنصر واجهة المستخدم “Stack” في Flutter؟

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

سؤال2: ما هي وظيفة خاصية alignment في عنصر واجهة المستخدم “Stack”؟

تحدد العنصر الرئيسي في الـ “Stack”.
تحدد توزيع العناصر داخل الـ “Stack”.
تحدد حجم العناصر داخل الـ “Stack”.
تحدد ترتيب العناصر في الـ “Stack”.
الإجابة الصحيحة:
2. تحدد توزيع العناصر داخل الـ “Stack”.

سؤال 3: ما هو تأثير استخدام Positioned داخل عنصر واجهة المستخدم “Stack”؟

يسمح بتحديد موقع محدد للعنصر داخل الـ “Stack”.
يحدد ترتيب العناصر بشكل عشوائي.
يجعل العنصر متوسطًا في المنتصف.
يجعل العنصر يمتلئ بالكامل داخل الـ “Stack”.
الإجابة الصحيحة:

يسمح بتحديد موقع محدد للعنصر داخل الـ “Stack”.

سؤال 4: ما هي وظيفة خاصية overflow في عنصر واجهة المستخدم “Stack”؟

تحدد توزيع العناصر داخل الـ “Stack”.
تحدد حجم العناصر داخل الـ “Stack”.
تحدد ترتيب العناصر في الـ “Stack”.
تحدد سلوك العناصر عند تجاوز حجم الـ “Stack”.
الإجابة الصحيحة:
4. تحدد سلوك العناصر عند تجاوز حجم الـ “Stack”.

سؤال 5: ما هي وظيفة خاصية fit في عنصر واجهة المستخدم “Stack”؟

تحدد توزيع العناصر داخل الـ “Stack”.
تحدد حجم العناصر داخل الـ “Stack”.
تحدد ترتيب العناصر في الـ “Stack”.
تحدد سلوك الـ “Stack” عندما تكون عناصرها أكبر من حجمها.
الإجابة الصحيحة:
2. تحدد حجم العناصر داخل الـ “Stack”.

سؤال 6: ما الفرق بين Stack و Column في Flutter؟

Stack يستخدم لترتيب العناصر بشكل متداخل، بينما Column يستخدم لترتيب العناصر بشكل عمودي.
Stack يستخدم لترتيب العناصر بشكل أفقي، بينما Column يستخدم لترتيب العناصر بشكل عمودي.
لا فرق بينهما، كلاهما يستخدم لترتيب العناصر بشكل متداخل.
Stack يستخدم لترتيب العناصر بشكل متداخل ومطلق، بينما Column يستخدم لترتيب العناصر بشكل عمودي فقط.
الإجابة الصحيحة:
4. Stack يستخدم لترتيب العناصر بشكل متداخل ومطلق، بينما Column يستخدم لترتيب العناصر بشكل عمودي فقط.

سؤال 7: ما هي وظيفة خاصية textDirection في عنصر واجهة المستخدم “Stack”؟

تحدد اتجاه النص في العناصر النصية داخل الـ “Stack”.
تحدد ترتيب العناصر في الـ “Stack” بناءً على النصوص الموجودة فيه.
تحدد اتجاه الـ “Stack” بناءً على اتجاه النص في أول عنصر نصي داخله.
تحدد اتجاه العناصر داخل الـ “Stack” بشكل عام.
الإجابة الصحيحة:
3. تحدد اتجاه الـ “Stack” بناءً على اتجاه النص في أول عنصر نصي داخله.

سؤال 8: كيف يمكن تحديد ترتيب العناصر في عنصر واجهة المستخدم “Stack”؟

باستخدام خاصية order.
باستخدام خاصية alignment.
باستخدام عنصر Positioned.
باستخدام خاصية fit.
الإجابة الصحيحة:
3. باستخدام عنصر Positioned.