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

Метод 1: базовое использование
Чтобы создать простой TextButton.icon, вам необходимо указать значок, метку и обратный вызов onPressed. Вот пример:

TextButton.icon(
  onPressed: () {
    // Perform action here
  },
  icon: Icon(Icons.add),
  label: Text('Add'),
)

Метод 2: настройка внешнего вида
Вы можете настроить внешний вид TextButton.icon, используя возможности тем Flutter. Например, вы можете изменить цвет кнопки, стиль текста и цвет значка. Вот пример:

TextButton.icon(
  onPressed: () {
    // Perform action here
  },
  icon: Icon(Icons.add),
  label: Text('Add'),
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
    backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
    textStyle: MaterialStateProperty.all<TextStyle>(
      TextStyle(fontSize: 16),
    ),
  ),
)

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

TextButton.icon(
  onPressed: null,
  icon: Icon(Icons.add),
  label: Text('Add'),
  style: ButtonStyle(
    foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
    backgroundColor: MaterialStateProperty.all<Color>(Colors.blue),
    textStyle: MaterialStateProperty.all<TextStyle>(
      TextStyle(fontSize: 16),
    ),
    overlayColor: MaterialStateProperty.all<Color>(Colors.red),
  ),
)

Метод 4: размещение значка
По умолчанию значок размещается перед меткой в ​​TextButton.icon. Однако вы можете изменить его положение с помощью параметра iconPlacement. Вот пример:

TextButton.icon(
  onPressed: () {
    // Perform action here
  },
  icon: Icon(Icons.add),
  label: Text('Add'),
  style: ButtonStyle(
    alignment: Alignment.centerLeft,
  ),
)

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