نقاط التوقف باستخدام LayoutBuilder

جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 17 من 30.

على الجهاز اللوحي، يعرض تطبيق البريد قائمة بجانب الرسائل. أما على الهاتف، فلا توجد مساحة كافية، لذا تظهر القائمة في الأعلى. يُسمّى العرض الذي يتغيّر عنده التخطيط نقطة التوقف.

تُخبرك LayoutBuilder بمقدار المساحة المتاحة للعنصر، وتتيح لك إنشاء شيء مختلف لكل حجم:

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return Column(children: [menu, content]); // هاتف
    }
    return Row(children: [menu, content]); // جهاز لوحي
  },
)

builder دالة يستدعيها Flutter باستخدام المساحة المتاحة له، والموجودة في constraints. تمثّل constraints.maxWidth أكبر عرض يمكن أن تكون عليه النتيجة. عندما يكون العرض أقل من 600 بكسل، تُرجع Column؛ وإلا فتُرجع Row. على هاتف بعرض 390 بكسل، ترى العمود؛ وعلى جهاز لوحي بعرض 1000 بكسل، ترى الصف.

تقرأ MediaQuery الشاشة بأكملها. أما LayoutBuilder فتقرأ المساحة المتاحة لعنصر واحد، لذا تظل تعمل حتى عندما يكون ذلك العنصر لوحة داخل صفحة أكبر.

التحدي

متوسط

تظهر القائمة والمحتوى دائمًا جنبًا إلى جنب، وهذا يسبب ضيقًا على الهاتف. استخدم LayoutBuilder مع نقطة توقف عند 600 بكسل:

أضيق من 600: تظهر القائمة فوق المحتوى، داخل Column
600 أو أعرض: جنبًا إلى جنب، داخل Row، كما هو الحال الآن

جرّب بنفسك

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Mail')),
        body: Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.teal.shade100,
                child: const Center(child: Text('Menu')),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.white,
                child: const Center(child: Text('Content')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}