Taille de l’écran : MediaQuery

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 16 sur 30.

Les téléphones ont des largeurs très variées. Pour dimensionner un élément en fonction de l’écran, demande à Flutter quelle est la taille de l’écran :

final size = MediaQuery.of(context).size;
final width = size.width;   // 390 sur ce téléphone
final height = size.height; // 844

MediaQuery.of(context) lit des informations sur l’écran sur lequel l’application s’exécute. .size correspond à sa largeur et à sa hauteur, dans les mêmes pixels que toutes les autres tailles que tu écris.

context est celui que reçoit build. Cette application conserve sa page dans son propre widget, HomeScreen, et lit la taille au début de son build, à côté de la page qui l’utilise.

Avec la largeur dans une variable, les tailles deviennent des opérations arithmétiques : size.width / 2 représente la moitié de l’écran, sur n’importe quel téléphone, et aussi sur une tablette.

Défi

Facile

La bannière fait toujours 200 pixels de large. Faites-la mesurer la moitié de la largeur de l’écran, quelle que soit la taille de l’écran.

Essayez vous-même

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