حجم الشاشة: MediaQuery

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

تأتي الهواتف بعروض متعددة. لتحديد حجم شيء ما بحسب الشاشة، اسأل Flutter عن حجم الشاشة:

final size = MediaQuery.of(context).size;
final width = size.width;   // 390 على هذا الهاتف
final height = size.height; // 844

تقرأ MediaQuery.of(context) معلومات عن الشاشة التي يعمل عليها التطبيق. .size هو عرضها وارتفاعها، بوحدات البكسل نفسها المستخدمة في كل حجم آخر تكتبه.

إن context هو ما تتلقاه build. يحتفظ هذا التطبيق بصفحته في عنصر واجهة مستخدم خاص به، HomeScreen، ويقرأ الحجم في بداية build، بجوار الصفحة التي تستخدمه.

عندما يكون العرض في متغير، تصبح الأحجام عمليات حسابية: size.width / 2 هو نصف الشاشة على أي هاتف، وكذلك على جهاز لوحي.

التحدي

سهل

يبلغ عرض اللافتة دائمًا 200 بكسل. اجعل عرضها نصف عرض الشاشة، مهما كان عرض الشاشة.

جرّب بنفسك

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(title: const Text('Screen Size')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('This screen is ${size.width.toStringAsFixed(0)} pixels wide'),
            const SizedBox(height: 16),
            Container(
              width: 200,
              height: 80,
              color: Colors.deepOrange,
              child: const Center(
                child: Text('Banner', style: TextStyle(color: Colors.white)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}