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

Метод 1: использование виджета ElevatedButton

Виджет ElevatedButton — это встроенный виджет Flutter, который предоставляет кнопку с дизайном материала и настраиваемыми параметрами стиля. Чтобы создать кнопку с закругленной рамкой с помощью ElevatedButton, вы можете использовать параметр стиля и определить RoundedRectangleBorder с указанным borderRadius.

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

Метод 2. Использование виджета FlatButton

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

FlatButton(
  onPressed: () {
    // Button action
  },
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Text('Rounded Button'),
)

Метод 3: использование виджета RawMaterialButton

Виджет RawMaterialButton предоставляет низкоуровневый способ создания кнопок во Flutter. Это дает больше возможностей настройки, включая закругленные границы. Чтобы создать кнопку с закругленной рамкой с помощью RawMaterialButton, установите для свойства shape значение RoundedRectangleBorder.

RawMaterialButton(
  onPressed: () {
    // Button action
  },
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Text('Rounded Button'),
)

Метод 4. Использование виджета-контейнера с BoxDecoration

Если вам требуется больше контроля над стилем кнопки, вы можете использовать виджет «Контейнер» с BoxDecoration. Этот метод дает вам возможность определять различные свойства, такие как цвет, радиус границы и т. д.

Container(
  width: 150.0,
  height: 50.0,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    color: Colors.blue,
  ),
  child: TextButton(
    onPressed: () {
      // Button action
    },
    child: Text('Rounded Button', style: TextStyle(color: Colors.white)),
  ),
)

В этой статье мы рассмотрели несколько методов создания и оформления кнопок с закругленными границами во Flutter. Мы рассмотрели использование встроенных виджетов, таких как ElevatedButton, FlatButton и RawMaterialButton, а также гибкость, обеспечиваемую виджетом «Контейнер» с BoxDecoration. С помощью этих методов вы можете легко добавить визуально привлекательные кнопки с закругленными границами в свое приложение Flutter, улучшая общее впечатление от пользователя.