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'),
            ),
          ],
        ),
      ),
    );
  }
}