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

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

Шаг 1. Импортируйте необходимые пакеты:

import 'dart:ui';
import 'package:flutter/material.dart';

Шаг 2. Оберните виджет «Контейнер» виджетом BackdropFilter:

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
  child: Container(
    // Container properties
  ),
)

Отрегулируйте значения sigmaXи sigmaY, чтобы контролировать интенсивность эффекта размытия.

Метод 2: виджеты CachedNetworkImage и Stack
Если вы хотите размыть изображение внутри контейнера, вы можете использовать виджеты CachedNetworkImage и Stack. Этот метод подходит, если вы хотите размыть сетевые изображения или изображения, загруженные с устройства. Выполните следующие действия:

Шаг 1. Импортируйте необходимые пакеты:

import 'package:cached_network_image/cached_network_image.dart';

Шаг 2. Оберните виджет «Контейнер» виджетом «Стек»:

Stack(
  children: [
    CachedNetworkImage(
      imageUrl: 'URL_OF_YOUR_IMAGE',
      fit: BoxFit.cover,
    ),
    Container(
      color: Colors.black.withOpacity(0.5), // Adjust opacity as needed
    ),
    Container(
      // Container properties
    ),
  ],
)

Виджет CachedNetworkImage загружает изображение по указанному URL-адресу, а виджет «Стек» накладывает на изображение полупрозрачный контейнер, создавая эффект размытия.

Метод 3: пакет flutter_blurhash
Если вы хотите быстро создать размытое изображение-заполнитель, вы можете использовать пакет flutter_blurhash. Выполните следующие действия:

Шаг 1. Импортируйте необходимые пакеты:

import 'package:flutter_blurhash/flutter_blurhash.dart';

Шаг 2. Замените виджет изображения виджетом BlurHash:

BlurHash(
  hash: 'YOUR_BLUR_HASH',
  imageFit: BoxFit.cover,
)

Замените YOUR_BLUR_HASH фактической строкой BlurHash. Вы можете генерировать строки BlurHash с помощью онлайн-инструментов или пакета flutter_blurhash.

Размытие контейнеров во Flutter можно добиться несколькими методами. Используя виджет BackdropFilter, виджеты CachedNetworkImage и Stack или пакет flutter_blurhash, вы можете добавить визуально привлекательные эффекты размытия в контейнеры вашего приложения. Экспериментируйте с этими методами, настраивайте параметры и раскройте свой творческий потенциал!

Не забудьте импортировать необходимые пакеты и обернуть соответствующие виджеты вокруг контейнера, чтобы добиться желаемого эффекта размытия. Наслаждайтесь созданием красивых и современных пользовательских интерфейсов во Flutter!