Bildschirmgröße: MediaQuery

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 16 von 30.

Telefone gibt es in vielen Breiten. Um etwas anhand des Bildschirms zu dimensionieren, fragst du Flutter, wie groß der Bildschirm ist:

final size = MediaQuery.of(context).size;
final width = size.width;   // 390 auf diesem Smartphone
final height = size.height; // 844

MediaQuery.of(context) liest Informationen über den Bildschirm, auf dem die App ausgeführt wird. .size gibt dessen Breite und Höhe in denselben Pixeln an wie alle anderen Größen, die du angibst.

Das context ist dasjenige, das build erhält. Diese App hält ihre Seite in ihrem eigenen Widget, HomeScreen, und liest die Größe ganz oben in ihrem build, neben der Seite, die sie verwendet.

Mit der Breite in einer Variablen werden Größen zu Rechenoperationen: size.width / 2 ist auf jedem Smartphone und auch auf einem Tablet die Hälfte des Bildschirms.

Aufgabe

Einfach

Das Banner ist immer 200 Pixel breit. Mach es halb so breit wie den Bildschirm, unabhängig davon, wie groß der Bildschirm ist.

Probier es selbst

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