التخطيطات في Flutter : تنظيم الواجهات باحتراف

عندما تبدأ في بناء تطبيق Flutter، أول ما ستلاحظه هو كمّ الأدوات التي تساعدك على ترتيب العناصر داخل الشاشة — وكلها تحت عنوان واحد: التخطيطات في Flutter

لكن السؤال الحقيقي هو:

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

في هذا المقال سنأخذ جولة شاملة في عالم تخطيطات Flutter، من الأدوات البسيطة إلى النماذج المعقدة، مع أمثلة عملية تجعل المفهوم واضحًا وممتعًا.

ما هو التخطيط (Layout) في Flutter؟

التخطيط هو الطريقة التي تُرتب بها Widgets داخل الشاشة.
فهو الذي يقرر:

• مكان ظهور كل عنصر
• كيف يتمدد أو ينكمش حسب المساحة
• وكيف يتفاعل مع تغيّر الاتجاه أو حجم الجهاز

في Flutter، كل شيء هو Widget — حتى التخطيطات نفسها.
وهذا يعني أن بإمكانك تداخل التخطيطات لتصنع تصاميم غنية ومعقدة بسهولة.

أنواع التخطيطات في Flutter

يمكن تقسيم التخطيطات إلى فئتين أساسيتين:

1. تخطيطات أحادية البُعد (One-dimensional layouts)

تنظّم العناصر على خط واحد فقط — إما عموديًا أو أفقيًا.
الأشهر منها:

Row

ترتب العناصر أفقيًا من اليسار إلى اليمين (أو العكس حسب اللغة):

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Icon(Icons.star),
    Icon(Icons.favorite),
    Icon(Icons.thumb_up),
  ],
)

Column

ترتب العناصر عموديًا من الأعلى إلى الأسفل:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('مرحباً بكم!'),
    Text('هذا مثال على Column'),
  ],
)

كلاهما من أهم اللبنات في بناء أي واجهة في Flutter.

2. تخطيطات ثنائية البُعد (Two-dimensional layouts)

تنظّم العناصر في شبكة (Grid) أو ضمن نظام تحديد المواقع.

Stack

تُستخدم لتكديس العناصر فوق بعضها — مثلاً لعرض نص فوق صورة:

Stack(
  alignment: Alignment.center,
  children: [
    Image.asset('images/background.jpg'),
    Text('نص فوق الصورة'),
  ],
)

GridView

تُرتب العناصر على شكل شبكة، مفيدة لعرض الصور أو المنتجات:

GridView.count(
  crossAxisCount: 2,
  children: List.generate(6, (index) {
    return Center(child: Text('عنصر $index'));
  }),
)

أدوات مساعدة للتحكم في المساحات

Flutter يوفر Widgets كثيرة لضبط التباعد، الحواف، والمحاذاة بين العناصر:

مثال عملي:

Row(
  children: [
    Icon(Icons.menu),
    Spacer(),
    Icon(Icons.search),
  ],
)

النتيجة: الأيقونتان على طرفي الشاشة تمامًا — بدون أي حسابات يدوية.

مفهوم القيود (Constraints)

في Flutter، كل Widget يُرسل “قيودًا” (Constraints) إلى الأطفال:

“هذه هي المساحة المتاحة لك.”

ثم يقرر الطفل حجمه بناءً على هذه القيود.
وإذا لم يتناسب، يحدث ما يسمى بـ Layout Error.

فهم هذا المبدأ أساسي لبناء واجهات صحيحة ومتجاوبة.

🌍 التخطيطات المتجاوبة (Responsive Layouts)

عالم اليوم مليء بالأجهزة ذات الأحجام المختلفة.
لذلك يجب أن تتعلم كيف تجعل واجهتك تتكيف مع كل شاشة.

بعض الأدوات المفيدة:

مثال باستخدام LayoutBuilder:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return _buildWideLayout();
    } else {
      return _buildNarrowLayout();
    }
  },
)

بهذا الشكل، يمكن لتطبيقك أن يعرض تخطيطًا مختلفًا على الهاتف والتابلت.

🧩 تخطيطات متقدمة

• CustomMultiChildLayout: لإنشاء أنظمة تخطيط مخصصة بالكامل.
• Flow: لأداء عالٍ مع عناصر كثيرة متحركة.
• Sliver Widgets: لتخطيطات قابلة للتمرير بكفاءة عالية (مثل القوائم الطويلة).

مثال سريع على SliverAppBar داخل CustomScrollView:

CustomScrollView(
  slivers: [
    SliverAppBar(
      floating: true,
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('عنوان ديناميكي'),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('عنصر $index')),
        childCount: 50,
      ),
    ),
  ],
)

نصائح ذهبية لتصميم تخطيطات ذكية

1. ابدأ بالتخطيطات الأبسط دائمًا (Row, Column).
2. استخدم Container فقط عند الحاجة إلى تزيين أو خلفية.
3. تجنب التداخل المفرط (Nested Layouts) — لأنه يبطئ الأداء.
4. افصل واجهاتك إلى Widgets صغيرة وقابلة لإعادة الاستخدام.
5. اختبر التخطيطات على شاشات متعددة دائمًا.

الخلاصة

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

✨ تذكّر: التخطيط الجيد ليس من يُظهر كل شيء، بل من يُظهر ما يهم أولًا، بطريقة ذكية ومتوازنة.