Изучение различных методов настройки радиуса приподнятых кнопок во Flutter

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

  1. Использование виджета ButtonStyle.
    Один из способов настроить радиус приподнятой кнопки — использовать виджет ButtonStyle. Этот виджет позволяет нам определить собственную форму кнопки. Вот пример:
ElevatedButton(
  style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
    ),
  ),
  onPressed: () {
    // Button action
  },
  child: Text('Custom Button'),
),
  1. Применение пользовательской темы:
    Система тем Flutter позволяет нам определить пользовательскую тему кнопок, которую можно применять глобально ко всем кнопкам с повышенными правами в нашем приложении. Мы можем указать свойство shapeтемы кнопки, чтобы настроить радиус. Вот пример:
Theme(
  data: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15.0),
          ),
        ),
      ),
    ),
  ),
  child: ElevatedButton(
    onPressed: () {
      // Button action
    },
    child: Text('Themed Button'),
  ),
),
  1. Создание пользовательского виджета кнопки.
    Для большей гибкости мы можем создать собственный виджет кнопки, который инкапсулирует желаемую настройку радиуса. Вот пример:
class CustomButton extends StatelessWidget {
  final double borderRadius;
  final VoidCallback onPressed;
  final String text;
  const CustomButton({
    required this.borderRadius,
    required this.onPressed,
    required this.text,
  });
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(borderRadius),
          ),
        ),
      ),
      onPressed: onPressed,
      child: Text(text),
    );
  }
}
// Usage:
CustomButton(
  borderRadius: 20.0,
  onPressed: () {
    // Button action
  },
  text: 'Custom Widget Button',
),

Настроить радиус приподнятых кнопок во Flutter можно различными способами. Используя виджет ButtonStyle, применяя собственную тему или создавая собственный виджет кнопки, разработчики могут легко адаптировать форму кнопки в соответствии с желаемым дизайном пользовательского интерфейса. Поэкспериментируйте с различными радиусами, чтобы найти идеальный вариант для ваших приложений Flutter.