Dimensioni dello schermo: MediaQuery

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 16 di 30.

I telefoni sono disponibili in molte larghezze. Per dimensionare un elemento in base allo schermo, chiedi a Flutter quanto è grande lo schermo:

final size = MediaQuery.of(context).size;
final width = size.width;   // 390 su questo telefono
final height = size.height; // 844

MediaQuery.of(context) legge informazioni sullo schermo su cui viene eseguita l’app. .size ne indica larghezza e altezza, espresse negli stessi pixel di tutte le altre dimensioni che scrivi.

context è quello che build riceve. Questa app mantiene la propria pagina nel suo widget, HomeScreen, e legge le dimensioni all’inizio del suo build, accanto alla pagina che le usa.

Con la larghezza in una variabile, le dimensioni diventano operazioni aritmetiche: size.width / 2 è metà dello schermo su qualsiasi telefono e anche su un tablet.

Sfida

Facile

Il banner è sempre largo 200 pixel. Fai in modo che sia largo la metà dello schermo, qualunque sia la larghezza dello schermo.

Provalo tu

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