Добавляет тени (эффект свечения) для текстовых полей и кнопок.
Features
Обычно, чтобы добавить тень к инпуту или кнопке эти элементы оборачиваются в элемент Container
с тенью. Такой подход увеличивает объём работы и усложняет код, а в случае с инпутами не корректно работает в соченании с error_text
и help_text
:
Плагин позволяет добавлять тень для текстовых полей и кнопок точно так же, как это делается для 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 поверх элемента управления. Затем, чтобы создать иллюзию, что тень находится за элементом управления из тени вырезается область, которая находится прямо над элементом управления.
Compatibility
Проверена работа со следующими borders.
Для Inputs:
- UnderlineInputBorder
- OutlineInputBorder
Для Buttons:
- BeveledRectangleBorder
- CircleBorder
- ContinuousRectangleBorder
- RoundedRectangleBorder
- StadiumBorder
Issues
- Не поддерживает добавление внутренней тени.
- Тень может перекрывать содержимое соседнего элемента
======================================
Stackoverflow answer
Вы можете использовать этот класс как обёртку для границы элемента. Он получают border элмента управления и затем рисуют тень для этого border поверх элемента управления. Чтобы создать иллюзию, что тень находится за элементом управления из тени вырезается область, которая находится прямо над элементом управления.
Class code examle
Либо вы можете использовать мой package link
. В нём используется более полная реализация такого подхода.