Добавляет тени (эффект свечения) для текстовых полей и кнопок.

Features

demo

Обычно, чтобы добавить тень к инпуту или кнопке эти элементы оборачиваются в элемент Container с тенью. Такой подход увеличивает объём работы и усложняет код, а в случае с инпутами не корректно работает в соченании с error_text и help_text:

container shadow

Плагин позволяет добавлять тень для текстовых полей и кнопок точно так же, как это делается для Container. Тень может быть добавлена либо сразу для всех элементов управления, через настройку theme для MaterialApp, либо и отдельно каждому элементу через изменение его стилей.

Usage

Для инпутов вам необходимо обернуть InputBorder with InputBorderShadow и установить параметры тени boxShadow.

Например, код

    MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        ),
      ),
    );

Должен быть заменён на

    MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        inputDecorationTheme: InputDecorationTheme(
          border: InputBorderShadow(
            boxShadow: const [
              BoxShadow(
                color: Colors.blue,
                blurRadius: 12,
              )
            ],
            child: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
            ),
          ),
        ),
      ),
    );

Для кнопок вам необходимо обернуть OutlinedBorder with OutlinedBorderShadow и установить параметры тени boxShadow.

Например, код

    MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        outlinedButtonTheme: OutlinedButtonThemeData(
            style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        )),
      ),
    );

Должен быть заменён на

    MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        outlinedButtonTheme: OutlinedButtonThemeData(
            style: ElevatedButton.styleFrom(
          shape: OutlinedBorderShadow(
            boxShadow: const [
              BoxShadow(
                color: Colors.blue,
                blurRadius: 12,
              )
            ],
            child: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
            ),
          ),
        )),
      ),
    );

Приведённые выше примеры показывают как добавлять тень для элементов управления глобально. Если необходимо добавить тень отдельному элементу урправления, то это делается конфигурированием его стилей:


    TextField(
      decoration: InputDecoration(
          border: InputBorderShadow(
        child: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        boxShadow: const [
          BoxShadow(
            color: Colors.blue,
            blurRadius: 12,
          )
        ],
      )),
    );

    ...

    ElevatedButton(
      onPressed: () {},
      child: const Text("Button"),
      style: ElevatedButton.styleFrom(
          shape: OutlinedBorderShadow(
        boxShadow: const [
          BoxShadow(
            color: Colors.blue,
            blurRadius: 12,
          )
        ],
        child: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      )),
    );

BorderShadow in Detail

Wrappers InputBorderShadow и OutlinedBorderShadow через параметр child получают border элмента управления и затем рисуют тень для этого border поверх элемента управления. Затем, чтобы создать иллюзию, что тень находится за элементом управления из тени вырезается область, которая находится прямо над элементом управления.

how it works

Compatibility

Проверена работа со следующими borders.

Для Inputs:

  • UnderlineInputBorder
  • OutlineInputBorder

Для Buttons:

  • BeveledRectangleBorder
  • CircleBorder
  • ContinuousRectangleBorder
  • RoundedRectangleBorder
  • StadiumBorder

Issues

  • Не поддерживает добавление внутренней тени.
  • Тень может перекрывать содержимое соседнего элемента

how it works

======================================

Stackoverflow answer

Вы можете использовать этот класс как обёртку для границы элемента. Он получают border элмента управления и затем рисуют тень для этого border поверх элемента управления. Чтобы создать иллюзию, что тень находится за элементом управления из тени вырезается область, которая находится прямо над элементом управления.

Class code examle

Либо вы можете использовать мой package link. В нём используется более полная реализация такого подхода.

Libraries

border_shadow
input_border_shadow
outlined_border_shadow
shadows_painter