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

Метод 1: использование виджета OutlinedButton
Самый простой способ создать контурную кнопку во Flutter — использовать встроенный виджет OutlinedButton. Этот виджет позволяет вам определить текст, стиль и поведение кнопки.

OutlinedButton(
  onPressed: () {
    // Add your button's action here
  },
  child: Text('Outline Button'),
  style: OutlinedButton.styleFrom(
    primary: Colors.blue, // Text color
    side: BorderSide(color: Colors.blue), // Outline color
  ),
)

Метод 2: настройка виджета ElevatedButton
Другой подход к достижению эффекта контурной кнопки — настройка виджета ElevatedButton. Изменяя свойства ее стиля, вы можете создать кнопку с контурным внешним видом.

ElevatedButton(
  onPressed: () {
    // Add your button's action here
  },
  child: Text('Outline Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.transparent, // Transparent background
    elevation: 0, // Remove shadow
    side: BorderSide(color: Colors.blue), // Outline color
  ),
)

Метод 3: создание пользовательского виджета кнопки
Если вы предпочитаете больше контроля и гибкости, вы можете создать собственный виджет кнопки с контуром. Такой подход позволяет вам определить собственный дизайн и поведение кнопок.

class OutlineButtonWidget extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  const OutlineButtonWidget({
    required this.text,
    required this.onPressed,
  });
  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: onPressed,
      child: Text(text),
      style: TextButton.styleFrom(
        primary: Colors.blue, // Text color
        side: BorderSide(color: Colors.blue), // Outline color
      ),
    );
  }
}
// Usage
OutlineButtonWidget(
  text: 'Outline Button',
  onPressed: () {
    // Add your button's action here
  },
)

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