Виджет SafeArea

Виджет SafeArea оборачивает дочерний виджет и добавляет отступы по данным MediaQuery. Параметры top, bottom, left и right включают или отключают отступ с каждой стороны. Параметр minimum задаёт нижнюю границу отступа. Дочерний виджет передают в child.

Синтаксис

SafeArea(
	child: child,
)

Параметры

Параметр	Описание
`child`	Дочерний виджет, который нужно сдвинуть от краёв экрана.
`top`	Учитывать отступ сверху. По умолчанию включён.
`bottom`	Учитывать отступ снизу. По умолчанию включён.
`left`	Учитывать отступ слева. По умолчанию включён.
`right`	Учитывать отступ справа. По умолчанию включён.
`minimum`	Минимальный отступ с каждой включённой стороны. Тип `EdgeInsets`.
`maintainBottomViewPadding`	Сохранять нижний `viewPadding`, когда клавиатура открыта.

Пример

Давайте выведем текст в безопасной зоне:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: SafeArea(
					child: Center(
						child: Text('abcde'),
					),
				),
			),
		),
	);
}

На экране текст 'abcde' не залезет под статус-бар и системные жесты.

Пример

Давайте отключим отступ только снизу, чтобы фон дошёл до края:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: SafeArea(
					bottom: false,
					child: Container(
						color: Colors.blue,
						child: const Center(
							child: Text('12345'),
						),
					),
				),
			),
		),
	);
}

На экране синий фон может занять всю нижнюю кромку, а текст останется ниже выреза сверху.

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

виджет MediaQuery,
откуда SafeArea берёт отступы экрана
класс MediaQueryData,
в котором лежат поля padding и viewPadding
метод paddingOf,
который читает отступы без обёртки SafeArea
виджет OrientationBuilder,
который меняет раскладку при повороте экрана