Ukuran Layar: MediaQuery

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 16 dari 30.

Ponsel memiliki lebar yang beragam. Untuk menentukan ukuran sesuatu berdasarkan layar, tanyakan kepada Flutter seberapa besar layar tersebut:

final size = MediaQuery.of(context).size;
final width = size.width;   // 390 pada ponsel ini
final height = size.height; // 844

MediaQuery.of(context) membaca informasi tentang layar tempat aplikasi berjalan. .size adalah lebar dan tingginya, dalam piksel yang sama dengan ukuran lainnya yang kamu tulis.

context adalah yang diterima build. Aplikasi ini menyimpan halamannya dalam widgetnya sendiri, HomeScreen, dan membaca ukurannya di bagian atas build, di samping halaman yang menggunakannya.

Dengan lebar di dalam variabel, ukuran bisa dihitung: size.width / 2 adalah setengah layar di ponsel mana pun, juga di tablet.

Tantangan

Mudah

Banner selalu memiliki lebar 200 piksel. Buat lebarnya setengah dari lebar layar, berapa pun ukuran layarnya.

Coba sendiri

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