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

Метод 1: использование виджетов Containerи BoxDecoration:
Самый простой способ добавить эффекты свечения или тени к виджетам Flutter — использовать 5 Виджетвместе с классом BoxDecoration.

Пример кода:

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 10,
        offset: Offset(0, 3), // changes the position of the shadow
      ),
    ],
    // Add other widget properties here
  ),
  child: YourWidget(),
),

Метод 2. Применение пользовательских эффектов рисования.
Другой подход — использовать виджет CustomPaintдля создания пользовательских фигур и применения таких эффектов, как свечение или тень.

Пример кода:

CustomPaint(
  painter: MyPainter(), // Create a custom painter class to define the glow or shadow effect
  child: YourWidget(),
),

Метод 3: использование сторонних пакетов.
Flutter имеет процветающую экосистему пакетов, которые предлагают готовые к использованию решения для добавления эффектов свечения или тени к вашим виджетам. Два популярных пакета — flutter_neumorphicи flutter_glow.

Пример кода (с использованием flutter_neumorphic):

Neumorphic(
  style: NeumorphicStyle(
    boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
    shadowLightColorEmboss: Colors.white,
    shadowDarkColorEmboss: Colors.black,
  ),
  child: YourWidget(),
),

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