גודל המסך: 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)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}