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

Метод 1: BoxDecoration
Класс BoxDecoration во Flutter позволяет определять сложные визуальные конструкции для различных виджетов, включая кнопки. Указав свойство BorderRadius в BoxDecoration, вы можете добиться закругления углов кнопок. Вот пример:

Container(
  width: 150,
  height: 50,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.blue,
  ),
  child: FlatButton(
    onPressed: () {},
    child: Text(
      'Button',
      style: TextStyle(
        color: Colors.white,
        fontSize: 16,
      ),
    ),
  ),
);

Метод 2: Виджет ClipRRect
Виджет ClipRRect во Flutter позволяет обрезать дочерний виджет с закругленными углами. Вы можете обернуть виджет кнопки с помощью ClipRRect, чтобы добиться желаемого эффекта радиуса границы. Вот пример:

ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: RaisedButton(
    onPressed: () {},
    color: Colors.blue,
    child: Text(
      'Button',
      style: TextStyle(
        color: Colors.white,
        fontSize: 16,
      ),
    ),
  ),
);

Метод 3: свойство формы MaterialButton.
Виджет Flutter MaterialButton предоставляет свойство формы, которое позволяет вам определить форму кнопки. Вы можете установить RoundedRectangleBorder с указанным BorderRadius для создания кнопок с закругленными углами. Вот пример:

MaterialButton(
  onPressed: () {},
  color: Colors.blue,
  textColor: Colors.white,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('Button'),
);

Метод 4: свойство формы FlatButton
Виджет FlatButton во Flutter также предоставляет свойство формы, которое вы можете использовать для установки радиуса границы. Указав RoundedRectangleBorder с желаемым BorderRadius, вы можете создавать кнопки с закругленными углами. Вот пример:

FlatButton(
  onPressed: () {},
  color: Colors.blue,
  textColor: Colors.white,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('Button'),
);

Метод 5: Свойство стиля ElevatedButton
С помощью виджета ElevatedButton вы можете использовать свойство style для определения стиля кнопки. Указав свойство формы с помощью RoundedRectangleBorder, вы можете добиться закругленных углов. Вот пример:

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
    primary: Colors.blue,
  ),
  child: Text('Button'),
);

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