Последнее обновление:
SafeArea c эффектом прозрачности

Как создать прозрачный SafeArea

Flutter

Виджет SafeArea от Flutter - это удобный способ убедиться, что ваш интерфейс не обрезан какими-либо выемками и вырезами, которые сейчас очень распространены на экранах смартфонов.

Однако у него очень мало настроек. Что делать, если вы хотите изменить цвет SafeArea? Вы должны обернуть его в Container и установить цвет контейнера. Но что, если вы хотите, чтобы SafeArea был прозрачным, а пользовательский интерфейс был виден под ним?

Нам на помощь приходит пакет colorful_safe_area позволяющий легко настраивать цвета в SafeArea.

Добавьте этот пакет в ваш pubspec.yaml файл:

dependencies:
  colorful_safe_area: ^0.2.1

Простой пример

В этом примере у меня есть Scaffold с синим фоном и ListView из красных контейнеров, заключенных в ColorfulSafeArea. Результат - то, что вы ожидаете от стандартного виджета SafeArea. Он добавляет отступ возле выемки.

Scaffold(
      backgroundColor: Colors.blue,
      body: ColorfulSafeArea(
        child: ListView.builder(
          itemBuilder: (context, index) {
            return Container(
              margin: EdgeInsets.all(10),
              width: 300,
              height: 200,
              color: Colors.red,
            );
          },
          itemCount: 10,
        ),
      ),
    )
ColorfulSafeArea без цвета
ColorfulSafeArea без цвета

Цвет

Не хотите, чтобы отступ сверху был того же цвета, что и фон? Придадим виджету ColorfulSafeArea другой цвет.

Scaffold(
  backgroundColor: Colors.blue,
    body: ColorfulSafeArea(
      color: Colors.white,
ColorfulSafeArea с цветом
ColorfulSafeArea с цветом

Прозрачность

Давайте попробуем использовать прозрачность. На этот раз мы установим для ColorSafeArea белый цвет с некоторой прозрачностью. Обратите внимание, что мы можем видеть синий фон скаффолда под SafeArea.

Scaffold(
  backgroundColor: Colors.blue,
    body: ColorfulSafeArea(
      color: Colors.white.withOpacity(0.7),
ColorfulSafeArea с эффектом прозрачности
ColorfulSafeArea с эффектом прозрачности

Наложение

Это круто, но, возможно, вы захотите увидеть эти красные контейнеры под ColorfulSafeArea. Чтобы виджет ColorfulSafeArea вел себя как наложение, мы должны установить правила overflowRules, которые используются, чтобы сообщать ColorfulSafeArea, каким частям его дочернего элемента разрешено отрисовываться под ним. Установив для правил наложения, для всех сторон, значение true, разрешаем дочернему элементу наложение. И теперь мы можем видеть контейнеры под ColorfulSafeArea.

Scaffold(
  backgroundColor: Colors.blue,
    body: ColorfulSafeArea(
      color: Colors.white.withOpacity(0.7),
      overflowRules: OverflowRules.all(true),
ColorfulSafeArea с эффектом наложения
ColorfulSafeArea с эффектом наложения

Вот и все! Теперь у вас есть прозрачный SafeArea.

Комментарии