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

Метод 1: использование стека и позиционированного виджета
Один простой подход — использовать виджет «Стек» и расположить контейнер с тенью блока на нужной стороне. Вот пример:

Stack(
  children: [
    // Widget content
    Container(
      // Your widget content here
    ),
    Positioned(
      top: 0,
      bottom: 0,
      left: 0, // Adjust the values to position the shadow
      child: Container(
        width: 12, // Adjust the width of the shadow
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.2), // Shadow color and opacity
              blurRadius: 8, // Adjust the blur radius
            ),
          ],
        ),
      ),
    ),
  ],
)

Метод 2: использование виджета ClipPath
Другой подход — использовать виджет ClipPath для обрезки тени с одной стороны. Вот пример:

ClipPath(
  clipper: ShapeBorderClipper(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8), // Adjust the border radius
    ),
  ),
  child: Container(
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.2), // Shadow color and opacity
          blurRadius: 8, // Adjust the blur radius
        ),
      ],
    ),
    child: // Your widget content here
  ),
)

Метод 3: CustomPainter
Для более сложных сценариев вы можете использовать CustomPainter для рисования тени на определенной стороне. Вот пример:

class ShadowPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final shadowPaint = Paint()
      ..color = Colors.black.withOpacity(0.2) // Shadow color and opacity
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 8); // Adjust the blur radius
    final shadowPath = Path()
      ..moveTo(0, size.height) // Starting point of the shadow
      ..lineTo(size.width, size.height) // Ending point of the shadow
      ..lineTo(size.width, size.height + 12) // Adjust the length of the shadow
      ..lineTo(0, size.height + 12) // Adjust the length of the shadow
      ..close();
    canvas.drawPath(shadowPath, shadowPaint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}
// Usage:
CustomPaint(
  painter: ShadowPainter(),
  child: // Your widget content here
)

Имея в своем распоряжении эти методы, вы можете легко добавлять тени на одной стороне в своих приложениях Flutter. Предпочитаете ли вы простой подход «Стек и позиционирование», возможности обрезки ClipPath или гибкость CustomPainter, выберите метод, который лучше всего соответствует вашим потребностям для достижения желаемого визуального эффекта.