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

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

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

Метод 2: BeveledRectangleBorder
Класс BeveledRectangleBorder создает кнопку со скошенными краями, что придает ей характерный внешний вид. Вы можете определить радиус скоса и дополнительно настроить внешний вид. Вот пример:

TextButton(
  style: TextButton.styleFrom(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
  ),
  onPressed: () {
    // Button action
  },
  child: Text('Custom Shape'),
),

Метод 3: StadiumBorder
Класс StadiumBorder создает кнопку с рамкой в ​​форме стадиона. Это скругленный прямоугольник с полукруглыми концами, похожий на спортивный стадион. Вот пример:

TextButton(
  style: TextButton.styleFrom(
    shape: StadiumBorder(),
  ),
  onPressed: () {
    // Button action
  },
  child: Text('Custom Shape'),
),

Метод 4: ContinuousRectangleBorder
Класс ContinuousRectangleBorder позволяет создавать текстовые кнопки прямоугольной формы. Вы можете указать угловые радиусы и дополнительно настроить внешний вид. Вот пример:

TextButton(
  style: TextButton.styleFrom(
    shape: ContinuousRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
  ),
  onPressed: () {
    // Button action
  },
  child: Text('Custom Shape'),
),

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

ClipRRect(
  borderRadius: BorderRadius.circular(10.0),
  child: TextButton(
    onPressed: () {
      // Button action
    },
    child: Text('Custom Shape'),
  ),
),

В этой статье мы рассмотрели различные методы настройки формы текстовых кнопок во Flutter. Используя такие свойства, как BorderRadius, BeveledRectangleBorder, StadiumBorder, ContinuousRectangleBorder и ClipRRect, вы можете создавать уникальные и визуально привлекательные текстовые кнопки, соответствующие дизайну вашего приложения. Поэкспериментируйте с этими методами и найдите форму, которая лучше всего подходит для вашего применения.