شرح LayoutBuilder وأهميتها في Flutter

يعني إيه LayoutBuilder في Flutter؟ ​

أكيد وانت شغال على تطبيق Flutter، واجهت الموقف ده:
التطبيق شكله حلو على الموبايل، لكن أول ما تجربه على تابلت أو شاشة كبيرة، الدنيا بتبوظ
الحل؟ هنا بييجي دور الويدجت العبقرية LayoutBuilder

الويدجت دي ببساطة بتديك إمكانية تعرف المساحة المتاحة للتصميم - يعني بتقولك "الأب بتاعي مساحته قد إيه؟" - وبناءً على كده تقدر تغير طريقة عرض المحتوى بكل سهولة

الفكرة العامة ​

الـ LayoutBuilder بتشتغل على مبدأ بسيط جدًا:
هي بتاخد BoxConstraints من الـ Parent Widget وتديها لك علشان تستخدمها جوه التصميم.
يعني تقدر تبني واجهة مختلفة حسب المساحة المتوفرة.

زي مثلًا لما يكون عندك تطبيق عايز تعرض فيه تصميمين مختلفين:

• تصميم للموبايل
• وتصميم تاني للتابلت أو الشاشات الكبيرة

بدل ما تعمل شرط في كل ويدجت على حدة، LayoutBuilder بتخليك تتحكم في ده كله من مكان واحد بس

مثال عملي على LayoutBuilder ​

خلينا نشوف كود عملي بسيط يوضح الفكرة:

import 'package:flutter/material.dart';

class ResponsiveExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth > 600) {
            // لو الشاشة كبيرة (تابلت مثلاً)
            return Center(
              child: Text(
                '📺 شاشة كبيرة',
                style: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                ),
              ),
            );
          } else {
            // لو الشاشة صغيرة (موبايل)
            return Center(
              child: Text(
                '📱 شاشة صغيرة',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.w500,
                ),
              ),
            );
          }
        },
      ),
    );
  }
}

الكود فوق بيعمل حاجة لطيفة جدًا
لو التطبيق مفتوح على شاشة أكبر من 600px، بيعرض رسالة مختلفة عن اللي بيظهر على الموبايل.
وده بالضبط اللي بنسميه Responsive Design - تصميم بيتأقلم مع حجم الشاشة

ليه تستخدم LayoutBuilder بدل MediaQuery؟ ​

ممكن تسأل نفسك: "طب وأنا عندي MediaQuery، ليه أستخدم LayoutBuilder؟"
سؤال ممتاز

• MediaQuery بيديك معلومات عن الشاشة كلها (يعني عرض وارتفاع الجهاز).
• أما LayoutBuilder فبيديك معلومات عن المساحة المتاحة للويدجت نفسها داخل التصميم.

وده فرق كبير جدًا، خصوصًا لما بتشتغل على مكونات داخلية جوه واجهة معقدة.
يعني لو عندك ويدجت جوه Column أو Container، الـ LayoutBuilder هو الحل الأدق لأنها بتفهم المساحة اللي متاحة فعلاً للويدجت دي فقط

متى تستخدم LayoutBuilder؟ ​

فيه مواقف كتير هتحتاج فيها تستخدم LayoutBuilder:

• لما تعمل Responsive UI لتطبيقك وتحتاج تغيّر التصميم حسب حجم الشاشة.
• لو عندك Widget جوه مكون أكبر، وعايزها تتغير بناءً على حجم المساحة اللي واخداها.
• لما تعمل Dynamic Layouts للصور أو القوائم أو الكروت.

يعني مثلاً لو بتعمل Dashboard بيظهر صفين على الموبايل، و3 صفوف على اللابتوب - فـ LayoutBuilder هو الحل الأمثل

نصائح سريعة وأفكار للاستخدام ​

• جرب تستخدم constraints.maxWidth لتحديد النقطة اللي عندها التصميم يتغير.
• خليك دايمًا منظم في أكوادك وخلي كل تصميم جوه Widget مستقلة.
• ممكن كمان تستخدمها مع GridView أو Flex Widgets علشان تبني تصميم ديناميكي بالكامل.

مثلاً:

if (constraints.maxWidth > 1000) {
    return GridView.count(crossAxisCount: 4);
}
else if (constraints.maxWidth > 600) {
    return GridView.count(crossAxisCount: 2);
}
else {
    return GridView.count(crossAxisCount: 1);
}

وده مثال بسيط بيخلي عدد الأعمدة يتغير حسب حجم الشاشة بشكل ذكي جدًا

الخلاصة ​

الـ LayoutBuilder من أقوى الويدجتس في Flutter، وبتديك حرية رهيبة في تصميم واجهات Responsive وسلسة
لو بدأت تعتمد عليها بدل الحلول التقليدية، هتلاقي التطبيق بتاعك بيتأقلم مع أي شاشة بسهولة - من الموبايل لحد التابلت والديسكتوب

جربها بنفسك، وشاركنا رأيك… شايف ممكن تستخدمها في إيه؟