Ekran Boyutu: MediaQuery

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 16 / 30.

Telefonların genişlikleri farklıdır. Bir şeyi ekrana göre boyutlandırmak için Flutter'a ekranın ne kadar büyük olduğunu sorun:

final size = MediaQuery.of(context).size;
final width = size.width;   // bu telefonda 390
final height = size.height; // 844

MediaQuery.of(context), uygulamanın çalıştığı ekranla ilgili bilgileri okur. .size, yazdığınız diğer tüm boyutlarla aynı pikseller cinsinden, ekranın genişliği ve yüksekliğidir.

context, build yönteminin aldığı değerdir. Bu uygulama sayfasını kendi widget'ı olan HomeScreen içinde tutar ve boyutu, onu kullanan sayfanın yanında, build yönteminin en başında okur.

Genişlik bir değişkende olduğunda, boyutlar aritmetik işlemlere dönüşür: size.width / 2, herhangi bir telefonda, hatta tablette bile ekranın yarısıdır.

Görev

Kolay

Afiş her zaman 200 piksel genişliğindedir. Ekranın genişliği ne olursa olsun, afişi ekranın yarısı genişliğinde yap.

Kendin dene

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