Размер экрана: MediaQuery

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 16 из 30.

Телефоны бывают разной ширины. Чтобы задать размер элемента в зависимости от экрана, спроси Flutter, каков размер экрана:

final size = MediaQuery.of(context).size;
final width = size.width;   // 390 на этом телефоне
final height = size.height; // 844

MediaQuery.of(context) считывает сведения об экране, на котором работает приложение. .size — это его ширина и высота в тех же пикселях, в которых ты задаёшь все остальные размеры.

context — это тот аргумент, который получает build. Это приложение хранит свою страницу в отдельном виджете HomeScreen и считывает размер в начале его метода build, рядом со страницей, которая его использует.

Если сохранить ширину в переменной, размеры можно вычислять: size.width / 2 — это половина экрана на любом телефоне и планшете.

Задание

Легко

Ширина баннера всегда составляет 200 пикселей. Сделай его шириной в половину экрана, каким бы ни был размер экрана.

Попробуйте сами

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