Скрытый шедевр Flutter: BackdropFilter

FlutterPulse

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Превратите обычные интерфейсы в премиум-опыт с помощью одного виджета

Unboxing Widgets (Часть 1)

Что такое виджет BackdropFilter?

Большинство разработчиков Flutter никогда не используют его — но как только вы попробуете, вы задумаетесь, почему не делали этого раньше.

Виджет BackdropFilter делает что-то замечательное.

BackdropFilter позволяет применять эффекты размытия и фильтрации к тому, что находится за вашим виджетом.

Представьте себе стиль iOS с матовым стеклом… но в Flutter.

Почему это прорыв?

Добавляет мгновенный премиум- и современный вид
Очень легкий и простой в использовании
Раотает с диалогами, листами, модальными окнами и многим другим

Создание эффекта размытия

Создание эффекта размытия с помощью виджета BackdropFilter является одним из наиболее распространенных случаев использования. Вы можете использовать ImageFilter.blur для достижения этого. Теперь давайте посмотрим на пример, где мы хотим размыть определенную часть фона нашего приложения Flutter:

return Scaffold(
      body: Stack(
        children: <Widget>[
          Image.network(
            'https://cdn.pixabay.com/photo/2024/08/26/05/20/ai-generated-8998175_640.jpg', // Замените на фактический URL изображения
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            fit: BoxFit.cover,
          ),
          Center(
            child: ClipRect(
              // Обрезать виджет, чтобы содержать размытие в одном виджете
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), // Фильтр
                child: Container(
                  width: 200.0, // Ширина
                  height: 200.0, // Высота
                  decoration: BoxDecoration(color: Colors.white.withAlpha(50), borderRadius: BorderRadius.circular(12)),
                  child: Center(child: Text('Привет, мир', style: TextStyle(fontSize: 24, color: Colors.black))),
                ),
              ),
            ),
          ),
        ],
      ),
    );

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

Применение на весь экран

Для полноэкранного размытия, которое влияет на весь фон, при этом уважая обрезку предков виджета, BackdropFilter можно обернуть вокруг виджета, который заполняет экран.

Чтобы создать полноэкранное размытие, обычно BackdropFilter является братом полноэкранного элемента, такого как изображение в Stack. Вот иллюстрация этой концепции:

    return Scaffold(
      body: Stack(
        fit: StackFit.expand, // Обеспечивает заполнение стека всего экрана
        children: <Widget>[
          /// Фоновое изображение
          Image.network('https://cdn.pixabay.com/photo/2024/08/26/05/20/ai-generated-8998175_640.jpg', fit: BoxFit.cover),
          BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), // Фильтр размытия
            child: SizedBox(),
          ),
        ],
      ),
    );

Заключение

Виджет BackdropFilter является мощным классом в фреймворке Flutter, который может значительно повысить визуальную эстетику вашего приложения. Понимая, как использовать BackdropFilter в сочетании с другими виджетами, такими как Container, ClipRect, и используя свойства, такие как ImageFilter.blur, вы можете создавать потрясающие интерфейсы, которые фильтруют определенные области или даже весь экран. Будете ли вы стремиться выделить один виджет с четким размытием или создать завораживающие полноэкранные фоны, BackdropFilter Flutter предлагает вам универсальный инструмент для оживления ваших творческих идей.

Редко используется. Мгновенно впечатляет. Это один из виджетов, который может сделать ваш интерфейс выделяющимся .