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

Метод 1: виджет BoxShadow
Самый простой способ добавления теней к контейнеру во Flutter — использование виджета BoxShadow. Этот виджет позволяет вам определить цвет, радиус распространения, радиус размытия и смещение тени.

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        spreadRadius: 5,
        blurRadius: 10,
        offset: Offset(0, 3),
      ),
    ],
  ),
)

Метод 2: CustomBoxShadow
Если вам нужен больший контроль над эффектом тени, вы можете создать собственный BoxShadow, расширив класс BoxShadow и переопределив метод createBoxShader. Это позволяет создавать сложные эффекты теней с помощью градиентов, узоров или нестандартных фигур.

class CustomBoxShadow extends BoxShadow {
  const CustomBoxShadow({
    Color color = const Color(0xFF000000),
    Offset offset = Offset.zero,
    double blurRadius = 0.0,
    double spreadRadius = 0.0,
  }) : super(
          color: color,
          offset: offset,
          blurRadius: blurRadius,
          spreadRadius: spreadRadius,
        );
  @override
  Paint toPaint() {
    final Paint paint = Paint()
      ..color = color
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, blurSigma);
    return paint;
  }
}
Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    boxShadow: [
      CustomBoxShadow(
        color: Colors.black.withOpacity(0.2),
        spreadRadius: 5,
        blurRadius: 10,
        offset: Offset(0, 3),
      ),
    ],
  ),
)

Метод 3: Нейоморфный контейнер
Неоморфный стиль дизайна популярен в современных пользовательских интерфейсах, и вы можете добиться этого эффекта, комбинируя несколько виджетов BoxShadow с разными цветами и смещениями. Это создает мягкий рельефный вид.

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.grey[200],
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.grey[300],
        offset: Offset(-5, -5),
        blurRadius: 10,
        spreadRadius: 1,
      ),
      BoxShadow(
        color: Colors.grey[100],
        offset: Offset(5, 5),
        blurRadius: 10,
        spreadRadius: 1,
      ),
    ],
  ),
)

Метод 4: ClipPath и CustomPainter
Для получения более сложных эффектов тени можно объединить виджет ClipPath с CustomPainter. Этот метод обеспечивает более высокий уровень контроля над формой и положением тени.

class ShadowClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // Define the custom shape for the shadow
    // ...
    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
Container(
  width: 200,
  height: 200,
  child: CustomPaint(
    painter: ShadowPainter(),
    child: ClipPath(
      clipper: ShadowClipper(),
      child: Container(
        color: Colors.white,
      ),
    ),
  ),
)

В этой статье мы рассмотрели различные методы реализации эффектов тени во Flutter с помощью контейнеров. Мы рассмотрели простые подходы, такие как использование виджета BoxShadow, создание пользовательских теней с помощью класса CustomBoxShadow, реализацию неоморфного дизайна, а также расширенные методы с использованием ClipPath и CustomPainter. Используя эти методы, вы можете повысить визуальную привлекательность пользовательского интерфейса вашего приложения Flutter и создать потрясающие эффекты теней.