SafeArea והחריץ

חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 13 מתוך 30.

ברוב הטלפונים שטח המסך אינו מלבן נקי. השעון והמגרעת של המצלמה מכסים את החלק העליון, וסרגל הבית מכסה את החלק התחתון. AppBar יודע זאת ומוריד את הכותרת שלו, אבל דף שאין בו כזה מתחיל ממש בקצה העליון, מתחת לשעון.

SafeArea מזיז את רכיב הצאצא שלו אל מחוץ לאזורים האלה:

Scaffold(
  body: SafeArea(
    child: Column(
      children: [...],
    ),
  ),
)

הוא שואל את הטלפון כמה מכל אחד מהקצוות מכוסה ומוסיף בדיוק את כמות השטח הזאת. בטלפון ללא מגרעת הוא לא מוסיף דבר, ולכן אותו קוד מתאים לכל טלפון.

Padding קבוע לא יכול לעשות זאת: 16 פיקסלים אינם מספיקים בטלפון שגובה סרגל המצב שלו הוא 47 פיקסלים, והם יותר מדי בטלפון שאין בו סרגל כזה.

אתגר

קל

בטלפון עם מגרעת, Good morning מוסתר מתחת לשעון והכפתור נמצא על סרגל הבית. הרחיקו את כל הדף משניהם.

נסו בעצמכם

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(
        backgroundColor: Colors.orange.shade50,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text('Good morning', style: TextStyle(fontSize: 32)),
            const Spacer(),
            ElevatedButton(
              onPressed: () {},
              child: const Text('Start workout'),
            ),
          ],
        ),
      ),
    );
  }
}