Метод sizeOf

Метод sizeOf виджета MediaQuery это короткая запись для MediaQuery.of(context).size. Без MediaQuery в предках метод ведёт себя как of и выбросит ошибку.

Синтаксис

MediaQuery.sizeOf(context)

Параметры

Параметр	Описание
`context`	`BuildContext` виджета внутри дерева с `MediaQuery`.

Пример

Давайте выведем ширину через sizeOf:

import 'package:flutter/material.dart';

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

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

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

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

Пример

Давайте займём половину ширины контейнером:

import 'package:flutter/material.dart';

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

	@override
	Widget build(BuildContext context)
	{
		var width = MediaQuery.sizeOf(context).width / 2;
		return SizedBox(
			width: width,
			height: 48,
			child: const ColoredBox(
				color: Colors.teal,
				child: Center(child: Text('abcde')),
			),
		);
	}
}

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

На экране появится бирюзовая полоска шириной в половину экрана с текстом по центру.

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

метод of,
который возвращает полный MediaQueryData
метод paddingOf,
который читает отступы экрана
класс MediaQueryData,
у которого геттер size совпадает с результатом sizeOf
виджет OrientationBuilder,
который меняет раскладку при изменении size