В Flutter виджет TextButton предоставляет простой способ создания интерактивных кнопок с текстом. Хотя TextButton не имеет встроенного свойства border, существует несколько методов, которые можно использовать для добавления границы вокруг TextButton. В этой статье мы рассмотрим пять различных подходов на примерах кода.

Метод 1: Виджет-контейнер
Один из самых простых способов добавить рамку вокруг TextButton — обернуть ее виджетом-контейнером и настроить его свойство оформления. Вот пример:

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.black,
      width: 1.0,
    ),
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: TextButton(
    onPressed: () {
      // Button action
    },
    child: Text('Button'),
  ),
)

Метод 2: Виджет материала
Другой подход — обернуть TextButton виджетом «Материал» и настроить свойства его формы и границы. Вот пример:

Material(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.black,
      width: 1.0,
    ),
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: TextButton(
    onPressed: () {
      // Button action
    },
    child: Text('Button'),
  ),
)

Метод 3: Виджет «Чернила»
Виджет «Чернила» позволяет добавлять эффекты брызг чернил к виджетам «Материал». Обернув TextButton виджетом Ink, вы можете добиться эффекта кнопки с рамкой. Вот пример:

Ink(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.black,
      width: 1.0,
    ),
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: TextButton(
    onPressed: () {
      // Button action
    },
    child: Text('Button'),
  ),
)

Метод 4: виджет пользовательской кнопки
Если вы часто используете кнопки с рамкой в ​​своем приложении, вы можете создать виджет пользовательской кнопки, который инкапсулирует стиль границы. Вот пример:

class BorderedButton extends StatelessWidget {
  final Widget child;
  final VoidCallback onPressed;
  const BorderedButton({required this.child, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.black,
          width: 1.0,
        ),
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: TextButton(
        onPressed: onPressed,
        child: child,
      ),
    );
  }
}
// Usage:
BorderedButton(
  onPressed: () {
    // Button action
  },
  child: Text('Button'),
)

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

ButtonTheme(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.black,
      width: 1.0,
    ),
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: TextButton(
    onPressed: () {
      // Button action
    },
    child: Text('Button'),
  ),
)

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

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

Реализуя эти методы, вы можете создавать визуально привлекательные и интерактивные кнопки в своем приложении Flutter.