Ответ
SafeArea — это виджет в Flutter, который автоматически добавляет отступы (padding) к своему дочернему виджету, чтобы избежать перекрытия контента системными интерфейсами. Он учитывает:
- Вырез экрана («чёлка») на iPhone.
- Динамический остров (Dynamic Island) на новых iPhone.
- Закругленные углы экрана.
- Панели навигации и статус-бары на Android и iOS.
Базовое использование: Просто оберните ваш корневой контент в SafeArea, обычно внутри Scaffold.body.
Scaffold(
body: SafeArea(
child: Column(
children: [
Text('Этот текст будет находиться в безопасной зоне'),
// ... остальной контент
],
),
),
);Тонкая настройка: Вы можете контролировать, к каким сторонам применять отступы.
SafeArea(
left: false, // Отключить отступ слева (например, для drawer)
top: true, // Включить отступ сверху (для статус-бара)
right: true,
bottom: true, // Включить отступ снизу (для панели навигации)
minimum: EdgeInsets.only(top: 20.0), // Минимальные обязательные отступы
child: MyContent(),
)Важные замечания:
- Не злоупотребляйте: Не оборачивайте каждый виджет в
SafeArea. Обычно он нужен только один раз на верхнем уровне экрана. ВложенныеSafeAreaприведут к накоплению отступов. - Альтернатива —
MediaQuery.padding: Если вам нужны данные о безопасных зонах для кастомной логики (например, для позиционирования виджета), используйтеMediaQuery.of(context).padding. - SliverSafeArea: Для использования внутри
CustomScrollViewсуществует виджетSliverSafeArea.
Использование SafeArea критически важно для обеспечения профессионального вида приложения и комфортного UX на современных устройствах с нестандартными формами экранов.
Ответ 18+ 🔞
Давай разберём этот ваш SafeArea, а то некоторые его используют, как будто он от всех бед спасает. Ну, типа, ебать мои старые костыли, виджет-то вроде простой, а тонкостей — овердохуища.
SafeArea — это такой хитрожопый виджет, который тупо отодвигает твой контент от всяких системных штук, чтобы он не залезал туда, куда не надо. Он смотрит на:
- Эту дурацкую «чёлочку» на айфонах.
- Динамический остров, который теперь у всех в новинках.
- Закруглённые края экрана.
- Панельки навигации и статус-бары на андроидах и iOS.
Как его впихнуть, чтобы не выпихнул: Проще простого — оберни в него основной контент на экране, обычно прямо в body у Scaffold.
Scaffold(
body: SafeArea(
child: Column(
children: [
Text('Этот текст будет находиться в безопасной зоне'),
// ... остальной контент
],
),
),
);Крутим настройки: Если тебе не всё равно, с каких сторон отступы делать, а с каких — нет. Например, если боковое меню (drawer) выезжает, то слева отступ может только мешать.
SafeArea(
left: false, // Выключаем отступ слева, чтобы для меню место было
top: true, // Включаем сверху — под чёлку не залезем
right: true,
bottom: true, // Включаем снизу — под навигационную панель
minimum: EdgeInsets.only(top: 20.0), // Минимальные отступы, меньше не будет
child: MyContent(),
)А теперь, внимание, главное, где все косячат:
- Не нахуй не нужно оборачивать в
SafeAreaкаждый второй виджет! Это как перцем посыпать — щепотка в кастрюлю, а не всю пачку. Одного на экране, на верхнем уровне, обычно хватает. Если натыкать их друг в друга, получишь слоёный пирог из отступов и сам от себя охуеешь. - Хочешь сам всё посчитать? Бери
MediaQuery.of(context).padding. Он даст тебе цифры — толщину этих самых безопасных зон. Полезно, если ты, например, какую-нибудь хуйню в угол экрана прилепить хочешь. - Для скроллящихся списков (
CustomScrollView) есть свойSliverSafeArea. Не пытайся обычный туда пихать, будет тебе ёперный театр.
Короче, если не хочешь, чтобы твое приложение выглядело, как будто его делал полупидор, который не в курсе про вырезы экрана — используй SafeArea. Но используй с головой, а не просто на авось. Доверия к разработчику, который про это не знает — ебать ноль.