لأنه برغم وجود بعض الخيارات اللي نقدر نتحكم فيها، لازلنا نعاني من ضبط الحجم بدون مشاكل:
▫️ childAspectRatio
ياخذ نسبة width/height ثابتة على كل العناصر
إذا كان العرض أو الارتفاع ضيق → Overflow
إذا كان واسع → مساحات فارغة كبيرة أسفل العنصر
▫️ maxCrossAxisExtent
تعطي لكل عنصر أقصى إرتفاع ثابت، ويحسب Flutter عدد الأعمدة تلقائيًا
يفيد لما يكون عندك حجم عناصر محدد مسبقًا
لكن ما يحل مشكلة الارتفاع الديناميكي حسب المحتوى
وبالتالي لازلنا ما نقدر نعرض العناصر بحجم ديناميكي يتناسب مع المحتوى الكبير أو الصغير… 😅
طريقتنا في الـ Row/Column
لما يكون عندنا Row أو Column ونحتاج نطبّق حجم أكبر عنصر على بقية العناصر أو توحيد الحجم :
IntrinsicWidth للعرض: ياخذ عرض أكبر عنصر في الـ Column ويطبقه على الجميع
IntrinsicHeight للارتفاع: ياخذ ارتفاع أكبر عنصر في الـ Row ويطبقه على الجميع
☑️ وهذا اللي نحتاجه في الـ Grid:
نقيس في كل صف أكبر ارتفاع ونطبقه على بقية العناصر في ذلك الصف
الحل العملي: flutter_layout_grid
بدل ما نكتب MultiChildRenderObjectWidget معقد، استخدمنا مكتبة قوية تعتمد على CSS Grid Layout عشان نتعامل مع content-sized items بسهولة:
__________________________________________________
Fixed tracks: للأبعاد الثابتة بالبكسل
columnSizes: [FixedTrackSize(100), 1.fr]
__________________________________________________
Flexible tracks: وحدة fr (Fractional Unit) لتوزيع المساحة المتبقية
// fr يعني flex: 1
columnSizes: [1.fr, 1.fr, 1.fr]
__________________________________________________
Content-sized tracks: auto عشان يحسب الحجم بناءً على محتوى العنصر
rowSizes: [auto, auto, auto]
__________________________________________________
في الصورة المرفقة مثال عام عن طريقة الاستخدام، وتقدر تتحكم بخصائص أكثر حسب احتياجك.
وللمكتبه استخدامات قوية خاصة:
Flutter Web: تقسيم الشاشة بشكل Responsive
لو حابين تتعمقوا أكثر وشوفوا كل التفاصيل:
