Rozmiar ekranu: MediaQuery

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 16 z 30.

Telefony mają różną szerokość. Aby określić rozmiar elementu na podstawie ekranu, zapytaj Fluttera o wymiary ekranu:

final size = MediaQuery.of(context).size;
final width = size.width;   // 390 na tym telefonie
final height = size.height; // 844

MediaQuery.of(context) odczytuje informacje o ekranie, na którym działa aplikacja. .size oznacza jego szerokość i wysokość, wyrażone w tych samych pikselach co wszystkie inne podawane przez Ciebie rozmiary.

context to ten, który otrzymuje build. Ta aplikacja przechowuje swoją stronę we własnym widżecie, HomeScreen, i odczytuje rozmiar na początku metody build, obok strony, która z niego korzysta.

Gdy szerokość jest zapisana w zmiennej, można wykonywać działania arytmetyczne na rozmiarach: size.width / 2 to połowa ekranu na każdym telefonie, a także na tablecie.

Wyzwanie

Łatwy

Baner ma zawsze 200 pikseli szerokości. Ustaw jego szerokość na połowę szerokości ekranu, niezależnie od rozmiaru ekranu.

Spróbuj swoich sił

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