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

Метод 1: использование виджета RaishedButton
Виджет RaishedButton — это встроенный виджет Flutter, который предоставляет приподнятую кнопку с возможностью добавления значка. Вот пример того, как создать приподнятую кнопку со значком:

RaisedButton.icon(
  onPressed: () {
    // Add your button's functionality here
  },
  icon: Icon(Icons.add),
  label: Text('Add'),
);

Метод 2: настройка поднятой кнопки с помощью значка
Если вам нужен больший контроль над внешним видом и поведением поднятой кнопки, вы можете настроить ее с помощью виджета ElevatedButtonи обернуть ее Rowвиджет, включающий значок. Вот пример:

ElevatedButton(
  onPressed: () {
    // Add your button's functionality here
  },
  style: ButtonStyle(
    // Customize the button's appearance here
  ),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.add),
      SizedBox(width: 5),
      Text('Add'),
    ],
  ),
);

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

class IconButtonWidget extends StatelessWidget {
  final IconData icon;
  final String label;
  final VoidCallback onPressed;
  IconButtonWidget({required this.icon, required this.label, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return RaisedButton.icon(
      onPressed: onPressed,
      icon: Icon(icon),
      label: Text(label),
    );
  }
}

Применение:
Чтобы использовать виджет пользовательской кнопки, вы можете просто создать экземпляр IconButtonWidgetи передать необходимые параметры:

IconButtonWidget(
  icon: Icons.add,
  label: 'Add',
  onPressed: () {
    // Add your button's functionality here
  },
);

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

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