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

Метод 1: настройка кнопки с помощью виджета-контейнера

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ],
    borderRadius: BorderRadius.circular(10),
  ),
  child: ElevatedButton(
    onPressed: () {
      // Button action
    },
    child: Text('Button'),
  ),
)

Метод 2: использование виджета «Материал» с виджетом «Чернила»

Material(
  elevation: 5.0,
  borderRadius: BorderRadius.circular(10),
  child: Ink(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10),
    ),
    child: InkWell(
      onTap: () {
        // Button action
      },
      child: Container(
        height: 50,
        width: 150,
        alignment: Alignment.center,
        child: Text(
          'Button',
          style: TextStyle(
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ),
  ),
)

Метод 3: стилизация кнопок с помощью Neumorphic Package

import 'package:neumorphic/neumorphic.dart';
NeumorphicButton(
  onPressed: () {
    // Button action
  },
  style: NeumorphicStyle(
    boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(10)),
    depth: 5,
    intensity: 0.7,
    shadowDarkColor: Colors.grey.withOpacity(0.5),
    shadowLightColor: Colors.white,
  ),
  child: Text('Button'),
)

Метод 4: использование пакета Enhanced_shadow

import 'package:elevated_shadow/elevated_shadow.dart';
ElevatedShadow(
  child: ElevatedButton(
    onPressed: () {
      // Button action
    },
    child: Text('Button'),
  ),
)

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