Чтобы добавить теневую рамку вокруг кнопки во Flutter, вы можете использовать различные методы. Вот несколько подходов, которые вы можете рассмотреть:
- Контейнер с 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
},
),
)
- Материал с возвышением.
Вместо использования контейнера вы можете обернуть виджет кнопки виджетом «Материал» и использовать свойство возвышения для создания эффекта тени. Вот пример:
Material(
elevation: 5,
shadowColor: Colors.grey.withOpacity(0.5),
borderRadius: BorderRadius.circular(8),
child: ElevatedButton(
child: Text('Button'),
onPressed: () {
// Button press logic
},
),
)
- Виджет настраиваемой кнопки.
Вы можете создать виджет настраиваемой кнопки, включающий стиль теневого блока. Это позволяет вам повторно использовать кнопку с эффектом тени во всем приложении. Вот пример:
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. Смело выбирайте тот, который лучше всего соответствует вашим требованиям.