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

Метод 1: BorderRadius.all
Самый простой способ применить радиус границы к OutlinedButton — использовать конструктор BorderRadius.all. Этот метод позволяет указать одинаковый радиус границы для всех четырех углов кнопки. Вот пример:

OutlinedButton(
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(10.0),
      ),
    ),
  ),
  onPressed: () {
    // Button functionality
  },
  child: Text('Button'),
),

Метод 2: BorderRadius.only
Если вы хотите применить разные радиусы границ к определенным углам кнопки, вы можете использовать конструктор BorderRadius.only. Этот метод позволяет вам определить различные радиусы границ для верхнего левого, верхнего правого, нижнего левого и нижнего правого углов. Вот пример:

OutlinedButton(
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10.0),
        bottomRight: Radius.circular(10.0),
      ),
    ),
  ),
  onPressed: () {
    // Button functionality
  },
  child: Text('Button'),
),

Метод 3: CustomShapeBorder
Для более расширенной настройки вы можете создать собственную форму для кнопки, используя класс CustomShapeBorder. Это позволяет вам определить собственный путь для границы кнопки. Вот пример:

class CustomButtonShape extends ShapeBorder {
  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.all(0);
  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) => Path();
  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    return Path()
      ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(10.0)));
  }
  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {}
  @override
  ShapeBorder scale(double t) => this;
}
OutlinedButton(
  style: OutlinedButton.styleFrom(
    shape: CustomButtonShape(),
  ),
  onPressed: () {
    // Button functionality
  },
  child: Text('Button'),
),

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