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

Метод 1: Виджет-контейнер
Один из способов добавить рамку к кнопке «Материал» — обернуть ее виджетом-контейнером. Виджет «Контейнер» позволяет вам определять свойства границы, такие как цвет, ширина и стиль. Вот пример:

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

Метод 2: FlatButton с ShapeBorder
Виджет FlatButton во Flutter позволяет настраивать его внешний вид с помощью ShapeBorder. Вы можете создать RoundedRectangleBorder со свойствами границы и назначить его свойству формы FlatButton. Вот пример:

FlatButton(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.blue,
      width: 2.0,
    ),
    borderRadius: BorderRadius.circular(8.0),
  ),
  onPressed: () {
    // Button action
  },
  child: Text('Button'),
)

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

InkWell(
  onTap: () {
    // Button action
  },
  child: Ink(
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.blue,
        width: 2.0,
      ),
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: Padding(
      padding: EdgeInsets.all(8.0),
      child: Text('Button'),
    ),
  ),
)

Метод 4: ElevatedButton с ButtonStyle
Виджет ElevatedButton, представленный во Flutter 2.0, также можно настроить с помощью ButtonStyle. Вы можете определить границу для кнопки, используя свойство стиля onPressed. Вот пример:

ElevatedButton(
  style: ButtonStyle(
    side: MaterialStateProperty.all(
      BorderSide(
        color: Colors.blue,
        width: 2.0,
      ),
    ),
    shape: MaterialStateProperty.all(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8.0),
      ),
    ),
  ),
  onPressed: () {
    // Button action
  },
  child: Text('Button'),
)

В этой статье мы рассмотрели несколько способов добавления границ к кнопкам Flutter Material. Используя виджет «Контейнер», FlatButton с ShapeBorder, InkWell с Ink и ElevatedButton с ButtonStyle, вы можете добиться различных стилей границ для своих кнопок. Не стесняйтесь экспериментировать с разными цветами, шириной и радиусом границы, чтобы они соответствовали дизайну вашего приложения.