كيف تعمل التخطيطات (Layouts) في Flutter؟

Question

Accepted Answer

يبني Flutter التخطيطات من خلال **تكوين أدوات التخطيط** — مثل **Row**، **Column**، **Container**، **Stack**، وغيرها — التي تنظم عناصرها الفرعية. فهم هذه أدوات التخطيط وكيفية دمجها معاً أمر أساسي لإنشاء هياكل الواجهات.

## أدوات التخطيط الأساسية

```text
ROW → arrange children HORIZONTALLY (left to right)
COLUMN → arrange children VERTICALLY (top to bottom)
CONTAINER → a box: padding, margin, size, color, decoration, alignment (very common)
STACK → overlay children on top of each other (z-axis, positioned)
PADDING → add space around a child
CENTER → center a child
EXPANDED / FLEXIBLE → make children fill available space (in a Row/Column)
SizedBox → fixed-size box / spacing
ListView → scrollable list of children
```

## تكوين التخطيط

```dart
Column(                          // vertical arrangement
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Title'),
    SizedBox(height: 8),         // spacing
    Row(                         // horizontal arrangement
      children: [
        Icon(Icons.star),
        Expanded(                // takes remaining horizontal space
          child: Text('Description'),
        ),
      ],
    ),
    Container(                   // a styled box
      padding: EdgeInsets.all(16),
      color: Colors.blue,
      child: Text('Boxed'),
    ),
  ],
)
```

## التخطيطات المرنة (المحاور الرئيسية والعرضية في Row/Column)

```text
→ MAIN axis (Row=horizontal, Column=vertical): mainAxisAlignment positions children
  along it (start, center, end, spaceBetween, etc.)
→ CROSS axis (perpendicular): crossAxisAlignment
→ EXPANDED/FLEXIBLE → children share available space proportionally (responsive layouts)
→ Compose these for flexible, responsive UIs.
```

## أهمية ذلك

فهم كيفية عمل التخطيطات في Flutter أمر أساسي لأن **ترتيب عناصر الواجهة ضروري لبناء أي واجهة**، لذا فهو معرفة عملية يجب معرفتها لتطوير Flutter.

يبني Flutter التخطيطات من خلال **تكوين أدوات التخطيط** — وفهم **أدوات التخطيط الأساسية** (Row للترتيب الأفقي، Column للترتيب العمودي، Container للصناديق المصممة مع padding/margin/decoration، Stack للطبقات المتراكبة، Padding و Center للتموضع، Expanded/Flexible لملء المساحة، ListView للقوائم القابلة للتمرير) ضروري لبناء أي هيكل واجهة.

تُستخدم هذه الأدوات بشكل مستمر في كل تطبيق Flutter.

فهم كيفية **تكوينها معاً** (دمج الصفوف والأعمدة والحاويات وغيرها لبناء تخطيطات معقدة من قطع بسيطة) هو الممارسة الأساسية لبناء واجهات Flutter — نفس مبدأ التكوين الذي يكمن وراء كل Flutter، مطبقاً على التخطيط.

فهم **نموذج التخطيط المرن** — **المحاور الرئيسية والعرضية** للصفوف والأعمدة (mainAxisAlignment و crossAxisAlignment لتموضع العناصر الفرعية) و **Expanded/Flexible** لمشاركة المساحة المتاحة بشكل متناسب (مما يتيح تخطيطات سريعة الاستجابة تتكيف مع أحجام الشاشات المختلفة) — مهم لإنشاء تخطيطات تبدو رائعة عبر الأجهزة، وهي مصدر قلق رئيسي للتطبيقات المحمولة.

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