Стиль флаттер-кнопок: как с легкостью закруглить приподнятые кнопки

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

Метод 1: использование свойства shape
Один из способов скруглить кнопку с повышенным уровнем — использовать свойство shape. Свойство shapeпозволяет нам определить форму нашей кнопки. Мы можем использовать класс RoundedRectangleBorderдля создания закругленной кнопки. Вот пример:

ElevatedButton(
  onPressed: () {
    // Button action
  },
  child: Text('Round Button'),
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
  ),
)

Метод 2. Применение пользовательской темы кнопки.
Другой подход заключается в определении пользовательской темы кнопки для вашего приложения. Таким образом, все приподнятые кнопки в вашем приложении будут иметь закругленные углы. Вот пример:

MaterialApp(
  theme: ThemeData(
    buttonTheme: ButtonThemeData(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
    ),
  ),
  home: MyHomePage(),
)

Метод 3. Создание многоразового виджета.
Если вы часто используете закругленные приподнятые кнопки, вы можете создать многоразовый виджет, чтобы упростить процесс. Вот пример пользовательского виджета RoundedElevatedButton:

class RoundedElevatedButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  RoundedElevatedButton({required this.text, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
    );
  }
}

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