شرح استخدام ويدجت Stack في فلاتر

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

ما هو عنصر Stack في Flutter؟

يعد عنصر Stack في Flutter عنصرًا يسمح بترتيب العناصر بشكل ثلاثي الأبعاد ومتداخل، حيث يتم تحديد موقع كل عنصر بالنسبة للعنصر الأساسي. ويمكن استخدام عنصر Stack في Flutter لتحديد موقع العناصر بشكل مرن ودقيق داخل الواجهة، مما يتيح إنشاء تخطيطات متجاوبة بشكل جيد مع مختلف الأجهزة.

“اقرأ أيضاً: شرح استخدام ويدجت StreamBuilder في فلاتر“

خصائص عنصر Stack في Flutter

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

1- الخاصية children:

تستخدم الخاصية children لتحديد العناصر التي يجب ترتيبها داخل Stack، ويتم تحديد العناصر باستخدام قائمة من الويدجت، ويمكن إضافة عدد غير محدود من العناصر داخل Stack.

Stack(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.green,
      margin: EdgeInsets.only(left: 25, top: 25),
    ),
  ],
)

2- الخاصية alignment:

تستخدم الخاصية alignment لتحديد موضع العناصر داخل Stack، حيث يمكن استخدام قيم مختلفة لتحديد موضع العنصر داخل الواجهة، مثل التالي:

• Alignment.topLeft: لوضع العنصر في الزاوية اليسرى العلوية.
• Alignment.topRight: لوضع العنصر في الزاوية اليمنى العلوية.
• Alignment.bottomLeft: لوضع العنصر في الزاوية اليسرى السفلية.
• Alignment.bottomRight: لوضع العنصر في الزاوية اليمنى السفلية.
• Alignment.center: لوضع العنصر في المنتصف.

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    // ...
  ],
)

“اقرأ أيضاً: شرح استخدام ويدجت ClipOval في فلاتر“

3- الخاصية fit:

تستخدم الخاصية fit لتحديد كيفية تناسب العناصر داخل Stack، حيث يمكن استخدام قيم مختلفة لتحديد كيفية تناسب العناصر، مثل التالي:

• BoxFit.contain: لتدوير العنصر بحيث يتم تناسبه داخل Stack.
• BoxFit.cover: لتغطية سطح Stack بالكامل.

Stack(
  fit: BoxFit.cover,
  children: <Widget>[
    // ...
  ],
)

4- الخاصية clipBehavior:

تستخدم الخاصية clipBehavior لتحديد كيفية عرض العناصر الزائدة داخل Stack، حيث يمكن استخدام قيم مختلفة لتحديد كيفية عرض العناصر الزائدة، مثل التالي:

Stack(
  clipBehavior: Clip.none,
  children: <Widget>[
    // ...
  ],
)

5- الخاصية textDirection:

تستخدم الخاصية textDirection لتحديد اتجاه النص داخل Stack، حيث يمكن استخدام القيمة TextDirection.ltr لاتجاه النص من اليسار إلى اليمين، أو TextDirection.rtl لاتجاه النص من اليمين إلى اليسار.

Stack(
  textDirection: TextDirection.ltr,
  children: <Widget>[
    // ...
  ],
)

مثال على استخدام Stack في Flutter:

دعونا نستخدم مثالًا لتوضيح كيفية استخدام عنصر 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 Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Stack Example'),
        ),
        body: Stack(
          children: <Widget>[
            Center(
              child: Image.network(
                'https://upload.wikimedia.org/wikipedia/commons/f/fb/Mixed-forest.jpg',
                fit: BoxFit.cover,
                width: double.infinity,
              ),
            ),
            const Center(
              child: Text(
                'the Forest!',
                style: TextStyle(
                  fontSize: 32.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.blue,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

في هذا المثال، استخدمنا عنصر Stack لوضع الصورة والنص في المكان المناسب. نستخدم عنصر Image.network لعرض الصورة من الانترنت، ونسخدم الخاصية fit لتحديد كيفية تناسب الصورة مع الشاشة. ثم نستخدم عنصر Center لوضع الصورة والنص في المنتصف بشكل أفقي ورأسي.

“اقرأ أيضاً: شرح استخدام ويدجت RadioListTile في فلاتر“

عنصر Stack في Flutter يمثل طريقة ممتازة لترتيب العناصر داخل الواجهة، ويمكن استخدامه لإنشاء تخطيطات متجاوبة ومرنة بشكل جيد على مختلف الأجهزة. ويتم استخدام عدة خصائص من أجل تحديد موقع وتناسب العناصر داخل Stack، مثل خاصية alignment و fit و overflow و textDirection و clipBehavior و textBaseline. يمكن إضافة عدد غير محدود من العناصر داخل Stack، مما يجعله أحد العناصر الأساسية في Flutter.