נקודות שבירה באמצעות 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')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}