Во Flutter установка радиуса кнопки является распространенным требованием при проектировании пользовательских интерфейсов. Радиус кнопки определяет кривизну углов кнопки, придавая ей более привлекательный вид. В этой статье мы рассмотрим несколько методов установки радиуса кнопки во Flutter, а также приведем примеры кода. Давайте начнем!

Метод 1: использование виджетов ElevatedButton и TextButton
Flutter предоставляет виджеты ElevatedButton и TextButton, которые имеют свойство стиля, позволяющее настраивать внешний вид кнопки, включая радиус кнопки.

ElevatedButton(
  style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
    ),
  ),
  onPressed: () {
    // Button's onPressed callback
  },
  child: Text('Elevated Button'),
)
TextButton(
  style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
    ),
  ),
  onPressed: () {
    // Button's onPressed callback
  },
  child: Text('Text Button'),
)

Метод 2. Использование виджета InkWell
Виджет InkWell обеспечивает эффект пульсации Material Design при нажатии кнопки, а также позволяет настраивать радиус кнопки.

InkWell(
  borderRadius: BorderRadius.circular(10.0),
  onTap: () {
    // Button's onTap callback
  },
  child: Container(
    padding: EdgeInsets.all(10.0),
    child: Text('InkWell Button'),
  ),
)

Метод 3: собственный виджет кнопки
Если вам нужен больший контроль над внешним видом кнопки, вы можете создать собственный виджет кнопки и определить радиус с помощью BoxDecoration.

class CustomButton extends StatelessWidget {
  final String text;
  final double radius;
  final VoidCallback onPressed;
  const CustomButton({
    Key? key,
    required this.text,
    required this.radius,
    required this.onPressed,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(radius),
          color: Colors.blue,
        ),
        padding: EdgeInsets.all(10.0),
        child: Text(
          text,
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}
// Usage:
CustomButton(
  text: 'Custom Button',
  radius: 10.0,
  onPressed: () {
    // Button's onPressed callback
  },
)

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