Виджет MediaQuery

Виджет MediaQuery кладёт в дерево объект MediaQueryData. Дочерние виджеты читают его через статические методы of и короткие обёртки вроде sizeOf. Свои значения задают в параметре data, а поддерево оборачивают в child. MaterialApp уже вставляет MediaQuery, но локально данные можно переопределить.

Синтаксис

MediaQuery(
	data: mediaQueryData,
	child: child,
)

Параметры

Параметр	Описание
`data`	Набор данных об экране для дочерних виджетов. Тип `MediaQueryData`.
`child`	Дочерний виджет, который получит доступ к данным.

Методы

Метод	Описание
`of`	Возвращает `MediaQueryData` из ближайшего предка.
`maybeOf`	Ищет `MediaQueryData` в дереве и возвращает null, если предка нет. Давайте сравним с of.
`sizeOf`	Возвращает `Size` области рисования из `MediaQuery`. Давайте вызовем его в примере.
`paddingOf`	Возвращает `EdgeInsets` с отступами от выреза и системных панелей. Давайте применим его в примере.
`viewInsetsOf`	Возвращает врезку от клавиатуры и оверлеев.
`viewPaddingOf`	Возвращает постоянные отступы экрана без клавиатуры.
`orientationOf`	Возвращает `Orientation` из `MediaQuery`. Давайте выведем её на экране.
`platformBrightnessOf`	Возвращает яркость платформы: светлая или тёмная.
`textScalerOf`	Возвращает масштаб текста из настроек системы.
`removePadding`	Строит виджет с обнулёнными отступами `padding`.
`removeViewInsets`	Строит `MediaQuery` с обнулёнными viewInsets. Давайте оставим макет неподвижным при клавиатуре.
`removeViewPadding`	Строит `MediaQuery` с обнулённым viewPadding по выбранным сторонам. Давайте применим его на примере.

Пример

Давайте выведем ширину экрана через MediaQuery.of:

import 'package:flutter/material.dart';

class ScreenWidth extends StatelessWidget
{
	const ScreenWidth({super.key});

	@override
	Widget build(BuildContext context)
	{
		var width = MediaQuery.of(context).size.width;
		return Text('$width');
	}
}

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: ScreenWidth(),
				),
			),
		),
	);
}

На экране по центру появится число - ширина области рисования в логических пикселях.

Пример

Давайте локально уменьшим масштаб текста для части экрана:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Builder(
					builder: (context) {
						var base = MediaQuery.of(context);
						return MediaQuery(
							data: base.copyWith(
								textScaler: TextScaler.linear(1.5),
							),
							child: const Center(
								child: Text('abcde'),
							),
						);
					},
				),
			),
		),
	);
}

На экране текст 'abcde' станет крупнее, чем задаёт система.

Смотрите также

класс MediaQueryData,
который хранит размер, отступы и яркость экрана
виджет SafeArea,
который не даёт контенту залезть под вырез и панели
виджет OrientationBuilder,
который строит разную раскладку для портрета и альбома
перечисление Orientation,
которое различает портрет и альбом