Как добавить теневую рамку вокруг кнопки во Flutter: методы и примеры

Чтобы добавить теневую рамку вокруг кнопки во Flutter, вы можете использовать различные методы. Вот несколько подходов, которые вы можете рассмотреть:

  1. Контейнер с BoxDecoration:
    Оберните виджет кнопки контейнером и используйте класс BoxDecoration, чтобы применить эффект тени блока. Вот пример:
Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes the position of the shadow
      ),
    ],
  ),
  child: ElevatedButton(
    child: Text('Button'),
    onPressed: () {
      // Button press logic
    },
  ),
)
  1. Материал с возвышением.
    Вместо использования контейнера вы можете обернуть виджет кнопки виджетом «Материал» и использовать свойство возвышения для создания эффекта тени. Вот пример:
Material(
  elevation: 5,
  shadowColor: Colors.grey.withOpacity(0.5),
  borderRadius: BorderRadius.circular(8),
  child: ElevatedButton(
    child: Text('Button'),
    onPressed: () {
      // Button press logic
    },
  ),
)
  1. Виджет настраиваемой кнопки.
    Вы можете создать виджет настраиваемой кнопки, включающий стиль теневого блока. Это позволяет вам повторно использовать кнопку с эффектом тени во всем приложении. Вот пример:
class ShadowButton extends StatelessWidget {
  final String text;
  final Function onPressed;
  ShadowButton({required this.text, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes the position of the shadow
          ),
        ],
      ),
      child: ElevatedButton(
        child: Text(text),
        onPressed: onPressed,
      ),
    );
  }
}
// Usage:
ShadowButton(
  text: 'Button',
  onPressed: () {
    // Button press logic
  },
)

Это несколько способов добавить теневую рамку вокруг кнопки во Flutter. Смело выбирайте тот, который лучше всего соответствует вашим требованиям.